@idooel/components 0.0.1-beta.55 → 0.0.1-beta.57
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.
|
@@ -1689,12 +1689,16 @@ var script$w = {
|
|
|
1689
1689
|
Actions: __vue_component__$x
|
|
1690
1690
|
},
|
|
1691
1691
|
props: {
|
|
1692
|
+
// ant table wrapper
|
|
1692
1693
|
height: {
|
|
1693
1694
|
type: Number
|
|
1694
1695
|
},
|
|
1696
|
+
width: {
|
|
1697
|
+
type: Number
|
|
1698
|
+
},
|
|
1695
1699
|
x: {
|
|
1696
1700
|
type: Number,
|
|
1697
|
-
default:
|
|
1701
|
+
default: 1200
|
|
1698
1702
|
},
|
|
1699
1703
|
y: {
|
|
1700
1704
|
type: Number,
|
|
@@ -1740,7 +1744,9 @@ var script$w = {
|
|
|
1740
1744
|
tableHeaderHeight: 0,
|
|
1741
1745
|
paginationHeight: 0,
|
|
1742
1746
|
innerPageSize: 10,
|
|
1743
|
-
innerCurrentPage: 1
|
|
1747
|
+
innerCurrentPage: 1,
|
|
1748
|
+
tableContentHeight: 0,
|
|
1749
|
+
obs: []
|
|
1744
1750
|
};
|
|
1745
1751
|
},
|
|
1746
1752
|
computed: {
|
|
@@ -1759,21 +1765,27 @@ var script$w = {
|
|
|
1759
1765
|
return `${this.height - this.paginationHeight - 16}px`;
|
|
1760
1766
|
},
|
|
1761
1767
|
getScrollHeightByHeight() {
|
|
1768
|
+
if (this.height > this.tableContentHeight) {
|
|
1769
|
+
return 0;
|
|
1770
|
+
}
|
|
1762
1771
|
return this.height - this.tableHeaderHeight - this.paginationHeight;
|
|
1763
1772
|
},
|
|
1773
|
+
isFlexColumn() {
|
|
1774
|
+
return this.columns.every(col => !col.width);
|
|
1775
|
+
},
|
|
1764
1776
|
getScroll() {
|
|
1765
1777
|
if (this.scroll) {
|
|
1766
1778
|
return this.scroll;
|
|
1767
1779
|
} else {
|
|
1768
1780
|
if (this.height) {
|
|
1769
1781
|
return {
|
|
1770
|
-
x: this.x,
|
|
1782
|
+
x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x,
|
|
1771
1783
|
y: this.getScrollHeightByHeight
|
|
1772
1784
|
};
|
|
1773
1785
|
}
|
|
1774
1786
|
return {
|
|
1775
|
-
x: this.x,
|
|
1776
|
-
y: this.y
|
|
1787
|
+
x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x,
|
|
1788
|
+
y: this.height > this.tableContentHeight ? 0 : this.y
|
|
1777
1789
|
};
|
|
1778
1790
|
}
|
|
1779
1791
|
}
|
|
@@ -1808,6 +1820,23 @@ var script$w = {
|
|
|
1808
1820
|
this.tableHeaderHeight = height;
|
|
1809
1821
|
});
|
|
1810
1822
|
},
|
|
1823
|
+
setTableContentHeight() {
|
|
1824
|
+
const el = document.querySelector('.ant-table-content');
|
|
1825
|
+
const ob = new ResizeObserver(entries => {
|
|
1826
|
+
if (this.tableHeaderHeight) return;
|
|
1827
|
+
for (const _ of entries) {
|
|
1828
|
+
requestAnimationFrame(() => {
|
|
1829
|
+
const {
|
|
1830
|
+
height
|
|
1831
|
+
} = el.getBoundingClientRect();
|
|
1832
|
+
this.tableContentHeight = height;
|
|
1833
|
+
this.setTableHeaderHeight();
|
|
1834
|
+
});
|
|
1835
|
+
}
|
|
1836
|
+
});
|
|
1837
|
+
ob.observe(el);
|
|
1838
|
+
this.obs.push(ob);
|
|
1839
|
+
},
|
|
1811
1840
|
setRowClassName(record, idx) {
|
|
1812
1841
|
return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
|
|
1813
1842
|
},
|
|
@@ -1818,8 +1847,11 @@ var script$w = {
|
|
|
1818
1847
|
}
|
|
1819
1848
|
},
|
|
1820
1849
|
mounted() {
|
|
1821
|
-
this.
|
|
1850
|
+
this.setTableContentHeight();
|
|
1822
1851
|
this.setPaginationHeight();
|
|
1852
|
+
},
|
|
1853
|
+
destroyed() {
|
|
1854
|
+
this.obs.forEach(ob => ob.disconnect());
|
|
1823
1855
|
}
|
|
1824
1856
|
};
|
|
1825
1857
|
|
|
@@ -1899,11 +1931,11 @@ __vue_render__$w._withStripped = true;
|
|
|
1899
1931
|
/* style */
|
|
1900
1932
|
const __vue_inject_styles__$w = function (inject) {
|
|
1901
1933
|
if (!inject) return
|
|
1902
|
-
inject("data-v-745bb9f3_0", { source: ".g-table__wrapper[data-v-745bb9f3] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-745bb9f3] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-745bb9f3] {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAsKA;EAyEA,aAAA;EACA,kBAAA;AC7OA;ADoKA;EACA,eAAA;AClKA;ADmKA;EACA,eAAA;ACjKA;ADkKA;EACA,eAAA;AChKA;ADqKA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACnKA;ADsKA;EACA,iDAAA;ACpKA;ADyKA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACvKA;AD2KA;EACA,wDAAA;EACA,uBAAA;EACA,4CAAA;ACzKA;AD2KA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACzKA;AD0KA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACxKA;AD0KA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACxKA;AD0KA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACxKA;AD2KA;EAMA,2DAAA;EACA,0BAAA;EACA,+CAAA;AC9KA;ADuKA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACrKA;AD0KA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACxKA;AD8KA;EACA,wCAAA;AC5KA;AD8KA;EACA,uCAAA;AC5KA;AD8KA;EACA,qBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;AC5KA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n height: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1500\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: Number,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1\r\n }\r\n },\r\n computed: {\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n if (this.height) {\r\n return { x: this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.x, y: this.y }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n this.paginationHeight = height\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.ant-table-header').getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.setTableHeaderHeight()\r\n this.setPaginationHeight()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n border-top-width: calc(var(--idooel-border-width) * 1px);\r\n border-top-style: solid;\r\n border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n /* margin-top: 8px; */\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
1934
|
+
inject("data-v-c4b1ea92_0", { source: ".g-table__wrapper[data-v-c4b1ea92] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-c4b1ea92] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-c4b1ea92] {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAoMA;EAyEA,aAAA;EACA,kBAAA;AC3QA;ADkMA;EACA,eAAA;AChMA;ADiMA;EACA,eAAA;AC/LA;ADgMA;EACA,eAAA;AC9LA;ADmMA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACjMA;ADoMA;EACA,iDAAA;AClMA;ADuMA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACrMA;ADyMA;EACA,wDAAA;EACA,uBAAA;EACA,4CAAA;ACvMA;ADyMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACvMA;ADwMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACtMA;ADyMA;EAMA,2DAAA;EACA,0BAAA;EACA,+CAAA;AC5MA;ADqMA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACnMA;ADwMA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACtMA;AD4MA;EACA,wCAAA;AC1MA;AD4MA;EACA,uCAAA;AC1MA;AD4MA;EACA,qBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;AC1MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1200\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: Number,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1,\r\n tableContentHeight: 0,\r\n obs: []\r\n }\r\n },\r\n computed: {\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n if (this.height > this.tableContentHeight) {\r\n return 0\r\n }\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n isFlexColumn () {\r\n return this.columns.every(col => !col.width)\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n if (this.height) {\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.height > this.tableContentHeight ? 0 : this.y }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n this.paginationHeight = height\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.ant-table-header').getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableContentHeight () {\r\n const el = document.querySelector('.ant-table-content')\r\n const ob = new ResizeObserver((entries => {\r\n if (this.tableHeaderHeight) return\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableContentHeight = height\r\n this.setTableHeaderHeight()\r\n })\r\n }\r\n }))\r\n ob.observe(el)\r\n this.obs.push(ob)\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.setTableContentHeight()\r\n this.setPaginationHeight()\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n border-top-width: calc(var(--idooel-border-width) * 1px);\r\n border-top-style: solid;\r\n border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n /* margin-top: 8px; */\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
1903
1935
|
|
|
1904
1936
|
};
|
|
1905
1937
|
/* scoped */
|
|
1906
|
-
const __vue_scope_id__$w = "data-v-
|
|
1938
|
+
const __vue_scope_id__$w = "data-v-c4b1ea92";
|
|
1907
1939
|
/* module identifier */
|
|
1908
1940
|
const __vue_module_identifier__$w = undefined;
|
|
1909
1941
|
/* functional template */
|
|
@@ -2167,6 +2199,7 @@ var script$u = {
|
|
|
2167
2199
|
data() {
|
|
2168
2200
|
return {
|
|
2169
2201
|
tableHeight: 0,
|
|
2202
|
+
tableWidth: 0,
|
|
2170
2203
|
modalFormMeta: {},
|
|
2171
2204
|
modalFormValue: false,
|
|
2172
2205
|
treeData: [],
|
|
@@ -2216,6 +2249,18 @@ var script$u = {
|
|
|
2216
2249
|
}
|
|
2217
2250
|
return void 0;
|
|
2218
2251
|
},
|
|
2252
|
+
x() {
|
|
2253
|
+
const {
|
|
2254
|
+
x
|
|
2255
|
+
} = this.tableMeta;
|
|
2256
|
+
return x;
|
|
2257
|
+
},
|
|
2258
|
+
y() {
|
|
2259
|
+
const {
|
|
2260
|
+
y
|
|
2261
|
+
} = this.tableMeta;
|
|
2262
|
+
return y;
|
|
2263
|
+
},
|
|
2219
2264
|
currentTableMode() {
|
|
2220
2265
|
if (!this.currentSelectionColumn) return void 0;
|
|
2221
2266
|
const {
|
|
@@ -2250,7 +2295,8 @@ var script$u = {
|
|
|
2250
2295
|
return {
|
|
2251
2296
|
currentTableSelection: this.currentTableSelection,
|
|
2252
2297
|
currentTreeNode: this.currentTreeNodeData,
|
|
2253
|
-
requestTableData: this.requestTableData
|
|
2298
|
+
requestTableData: this.requestTableData,
|
|
2299
|
+
querys: this.tableQuerys
|
|
2254
2300
|
};
|
|
2255
2301
|
},
|
|
2256
2302
|
overrideTableEvent() {
|
|
@@ -2574,8 +2620,10 @@ var script$u = {
|
|
|
2574
2620
|
const currentViewportHeight = window.innerHeight;
|
|
2575
2621
|
const tableRef = this.$refs[this.tableRef];
|
|
2576
2622
|
const {
|
|
2577
|
-
top: tableToTop
|
|
2623
|
+
top: tableToTop,
|
|
2624
|
+
width
|
|
2578
2625
|
} = tableRef.$el.getBoundingClientRect();
|
|
2626
|
+
this.tableWidth = width;
|
|
2579
2627
|
this.tableHeight = currentViewportHeight - tableToTop;
|
|
2580
2628
|
},
|
|
2581
2629
|
calculateTreeHeight() {
|
|
@@ -2718,7 +2766,10 @@ var __vue_render__$u = function () {
|
|
|
2718
2766
|
loading: _vm.loading,
|
|
2719
2767
|
columns: _vm.columns,
|
|
2720
2768
|
total: _vm.total,
|
|
2769
|
+
x: _vm.x,
|
|
2770
|
+
y: _vm.y,
|
|
2721
2771
|
height: _vm.tableHeight,
|
|
2772
|
+
width: _vm.tableWidth,
|
|
2722
2773
|
actions: _vm.actions,
|
|
2723
2774
|
pageSize: _vm.pageSize,
|
|
2724
2775
|
pageSizeOptions: _vm.pageSizeOptions,
|
|
@@ -2767,11 +2818,11 @@ __vue_render__$u._withStripped = true;
|
|
|
2767
2818
|
/* style */
|
|
2768
2819
|
const __vue_inject_styles__$u = function (inject) {
|
|
2769
2820
|
if (!inject) return
|
|
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 });
|
|
2821
|
+
inject("data-v-82adc510_0", { source: ".ele.model__tree-table[data-v-82adc510] {\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-82adc510] {\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-82adc510] {\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-82adc510] {\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-82adc510] {\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-82adc510] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-82adc510] {\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-82adc510] {\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":"AAwcA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACvcA;ADycA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACvcA;AD0cA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACxcA;AD0cA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACxcA;AD0cA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACxcA;AD2cA;EACA,gBAAA;ACzcA;AD0cA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACxcA;AD2cA;EACA,eAAA;EACA,kCAAA;ACzcA;;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 :x=\"x\"\r\n :y=\"y\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" :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 tableWidth: 0,\r\n modalFormMeta: {},\r\n modalFormValue: false,\r\n treeData: [],\r\n tableData: [],\r\n defaultExpandedKeys: [],\r\n defaultSelectedKeys: [],\r\n replaceFields: {\r\n title: 'title',\r\n children: 'children',\r\n key: 'id'\r\n },\r\n loading: false,\r\n total: 0,\r\n tableQuerys: {},\r\n resizeObserverModelTableWrapper: null,\r\n modelTableWrapperHeight: 0,\r\n currentTreeNodeData: {},\r\n 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 x () {\r\n const { x } = this.tableMeta\r\n return x\r\n },\r\n y () {\r\n const { y } = this.tableMeta\r\n return y\r\n },\r\n currentTableMode () {\r\n if (!this.currentSelectionColumn) return void 0\r\n const { multiple } = this.currentSelectionColumn\r\n if (type.isBool(multiple)) {\r\n if (multiple) {\r\n return 'checkbox'\r\n } else {\r\n return 'radio'\r\n }\r\n } else {\r\n return void 0\r\n }\r\n },\r\n modelTableContainerRef () {\r\n return uuidv4()\r\n },\r\n titleMode () {\r\n if (type.isObject(this.title)) {\r\n const { mode = '' } = this.title\r\n return mode\r\n }\r\n return void 0\r\n },\r\n tableRef () {\r\n return uuidv4()\r\n },\r\n exposed () {\r\n return {\r\n currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n querys: this.tableQuerys\r\n }\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, width } = tableRef.$el.getBoundingClientRect()\r\n this.tableWidth = width\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 });
|
|
2771
2822
|
|
|
2772
2823
|
};
|
|
2773
2824
|
/* scoped */
|
|
2774
|
-
const __vue_scope_id__$u = "data-v-
|
|
2825
|
+
const __vue_scope_id__$u = "data-v-82adc510";
|
|
2775
2826
|
/* module identifier */
|
|
2776
2827
|
const __vue_module_identifier__$u = undefined;
|
|
2777
2828
|
/* functional template */
|
|
@@ -1696,12 +1696,16 @@
|
|
|
1696
1696
|
Actions: __vue_component__$x
|
|
1697
1697
|
},
|
|
1698
1698
|
props: {
|
|
1699
|
+
// ant table wrapper
|
|
1699
1700
|
height: {
|
|
1700
1701
|
type: Number
|
|
1701
1702
|
},
|
|
1703
|
+
width: {
|
|
1704
|
+
type: Number
|
|
1705
|
+
},
|
|
1702
1706
|
x: {
|
|
1703
1707
|
type: Number,
|
|
1704
|
-
default:
|
|
1708
|
+
default: 1200
|
|
1705
1709
|
},
|
|
1706
1710
|
y: {
|
|
1707
1711
|
type: Number,
|
|
@@ -1747,7 +1751,9 @@
|
|
|
1747
1751
|
tableHeaderHeight: 0,
|
|
1748
1752
|
paginationHeight: 0,
|
|
1749
1753
|
innerPageSize: 10,
|
|
1750
|
-
innerCurrentPage: 1
|
|
1754
|
+
innerCurrentPage: 1,
|
|
1755
|
+
tableContentHeight: 0,
|
|
1756
|
+
obs: []
|
|
1751
1757
|
};
|
|
1752
1758
|
},
|
|
1753
1759
|
computed: {
|
|
@@ -1766,21 +1772,27 @@
|
|
|
1766
1772
|
return `${this.height - this.paginationHeight - 16}px`;
|
|
1767
1773
|
},
|
|
1768
1774
|
getScrollHeightByHeight() {
|
|
1775
|
+
if (this.height > this.tableContentHeight) {
|
|
1776
|
+
return 0;
|
|
1777
|
+
}
|
|
1769
1778
|
return this.height - this.tableHeaderHeight - this.paginationHeight;
|
|
1770
1779
|
},
|
|
1780
|
+
isFlexColumn() {
|
|
1781
|
+
return this.columns.every(col => !col.width);
|
|
1782
|
+
},
|
|
1771
1783
|
getScroll() {
|
|
1772
1784
|
if (this.scroll) {
|
|
1773
1785
|
return this.scroll;
|
|
1774
1786
|
} else {
|
|
1775
1787
|
if (this.height) {
|
|
1776
1788
|
return {
|
|
1777
|
-
x: this.x,
|
|
1789
|
+
x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x,
|
|
1778
1790
|
y: this.getScrollHeightByHeight
|
|
1779
1791
|
};
|
|
1780
1792
|
}
|
|
1781
1793
|
return {
|
|
1782
|
-
x: this.x,
|
|
1783
|
-
y: this.y
|
|
1794
|
+
x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x,
|
|
1795
|
+
y: this.height > this.tableContentHeight ? 0 : this.y
|
|
1784
1796
|
};
|
|
1785
1797
|
}
|
|
1786
1798
|
}
|
|
@@ -1815,6 +1827,23 @@
|
|
|
1815
1827
|
this.tableHeaderHeight = height;
|
|
1816
1828
|
});
|
|
1817
1829
|
},
|
|
1830
|
+
setTableContentHeight() {
|
|
1831
|
+
const el = document.querySelector('.ant-table-content');
|
|
1832
|
+
const ob = new ResizeObserver(entries => {
|
|
1833
|
+
if (this.tableHeaderHeight) return;
|
|
1834
|
+
for (const _ of entries) {
|
|
1835
|
+
requestAnimationFrame(() => {
|
|
1836
|
+
const {
|
|
1837
|
+
height
|
|
1838
|
+
} = el.getBoundingClientRect();
|
|
1839
|
+
this.tableContentHeight = height;
|
|
1840
|
+
this.setTableHeaderHeight();
|
|
1841
|
+
});
|
|
1842
|
+
}
|
|
1843
|
+
});
|
|
1844
|
+
ob.observe(el);
|
|
1845
|
+
this.obs.push(ob);
|
|
1846
|
+
},
|
|
1818
1847
|
setRowClassName(record, idx) {
|
|
1819
1848
|
return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
|
|
1820
1849
|
},
|
|
@@ -1825,8 +1854,11 @@
|
|
|
1825
1854
|
}
|
|
1826
1855
|
},
|
|
1827
1856
|
mounted() {
|
|
1828
|
-
this.
|
|
1857
|
+
this.setTableContentHeight();
|
|
1829
1858
|
this.setPaginationHeight();
|
|
1859
|
+
},
|
|
1860
|
+
destroyed() {
|
|
1861
|
+
this.obs.forEach(ob => ob.disconnect());
|
|
1830
1862
|
}
|
|
1831
1863
|
};
|
|
1832
1864
|
|
|
@@ -1906,11 +1938,11 @@
|
|
|
1906
1938
|
/* style */
|
|
1907
1939
|
const __vue_inject_styles__$w = function (inject) {
|
|
1908
1940
|
if (!inject) return
|
|
1909
|
-
inject("data-v-745bb9f3_0", { source: ".g-table__wrapper[data-v-745bb9f3] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-745bb9f3] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-745bb9f3] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-745bb9f3] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-745bb9f3] {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAsKA;EAyEA,aAAA;EACA,kBAAA;AC7OA;ADoKA;EACA,eAAA;AClKA;ADmKA;EACA,eAAA;ACjKA;ADkKA;EACA,eAAA;AChKA;ADqKA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACnKA;ADsKA;EACA,iDAAA;ACpKA;ADyKA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACvKA;AD2KA;EACA,wDAAA;EACA,uBAAA;EACA,4CAAA;ACzKA;AD2KA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACzKA;AD0KA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACxKA;AD0KA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACxKA;AD0KA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACxKA;AD2KA;EAMA,2DAAA;EACA,0BAAA;EACA,+CAAA;AC9KA;ADuKA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACrKA;AD0KA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACxKA;AD8KA;EACA,wCAAA;AC5KA;AD8KA;EACA,uCAAA;AC5KA;AD8KA;EACA,qBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;AC5KA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n height: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1500\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: Number,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1\r\n }\r\n },\r\n computed: {\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n if (this.height) {\r\n return { x: this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.x, y: this.y }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n this.paginationHeight = height\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.ant-table-header').getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.setTableHeaderHeight()\r\n this.setPaginationHeight()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n border-top-width: calc(var(--idooel-border-width) * 1px);\r\n border-top-style: solid;\r\n border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n /* margin-top: 8px; */\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
1941
|
+
inject("data-v-c4b1ea92_0", { source: ".g-table__wrapper[data-v-c4b1ea92] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper[data-v-c4b1ea92] .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper[data-v-c4b1ea92] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-c4b1ea92] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-c4b1ea92] {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\table\\src\\index.vue","index.vue"],"names":[],"mappings":"AAoMA;EAyEA,aAAA;EACA,kBAAA;AC3QA;ADkMA;EACA,eAAA;AChMA;ADiMA;EACA,eAAA;AC/LA;ADgMA;EACA,eAAA;AC9LA;ADmMA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;ACjMA;ADoMA;EACA,iDAAA;AClMA;ADuMA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACrMA;ADyMA;EACA,wDAAA;EACA,uBAAA;EACA,4CAAA;ACvMA;ADyMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACvMA;ADwMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACtMA;ADwMA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACtMA;ADyMA;EAMA,2DAAA;EACA,0BAAA;EACA,+CAAA;AC5MA;ADqMA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;ACnMA;ADwMA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACtMA;AD4MA;EACA,wCAAA;AC1MA;AD4MA;EACA,uCAAA;AC1MA;AD4MA;EACA,qBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;AC1MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"g-table__wrapper\" :style=\"{ height: `${height}px` }\">\r\n <a-table\r\n :class=\"[isNoData && 'g-table__no-data']\"\r\n :style=\"{ height: noDataAntTableHeight }\"\r\n :pagination=\"false\"\r\n :loading=\"loading\"\r\n :columns=\"innerColumns\"\r\n :row-selection=\"rowSelection\"\r\n :row-class-name=\"setRowClassName\"\r\n :data-source=\"dataSource\"\r\n :scroll=\"getScroll\">\r\n <template slot=\"action\" slot-scope=\"record\">\r\n <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n </template>\r\n </a-table>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n type: Number,\r\n default: 1200\r\n },\r\n y: {\r\n type: Number,\r\n default: 200\r\n },\r\n scroll: {\r\n type: Object\r\n },\r\n rowSelection: {\r\n type: Object\r\n },\r\n actions: {\r\n type: Array,\r\n default: () => []\r\n },\r\n total: {\r\n type: Number,\r\n default: 0\r\n },\r\n loading: {\r\n type: Boolean,\r\n default: false\r\n },\r\n columns: {\r\n type: Array,\r\n default: () => []\r\n },\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n },\r\n pageSize: {\r\n type: Number,\r\n default: 10\r\n },\r\n pageSizeOptions: {\r\n type: Array,\r\n default: () => ['10', '20', '30', '40']\r\n }\r\n },\r\n data() {\r\n return {\r\n tableHeaderHeight: 0,\r\n paginationHeight: 0,\r\n innerPageSize: 10,\r\n innerCurrentPage: 1,\r\n tableContentHeight: 0,\r\n obs: []\r\n }\r\n },\r\n computed: {\r\n innerColumns () {\r\n return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n },\r\n isNoData () {\r\n return !this.dataSource.length\r\n },\r\n noDataAntTableHeight () {\r\n //TODO\r\n if (this.dataSource.length) {\r\n // return 'auto'\r\n return `${this.height - this.paginationHeight - 16}px` \r\n }\r\n return `${this.height - this.paginationHeight - 16}px` \r\n },\r\n getScrollHeightByHeight () {\r\n if (this.height > this.tableContentHeight) {\r\n return 0\r\n }\r\n return this.height - this.tableHeaderHeight - this.paginationHeight\r\n },\r\n isFlexColumn () {\r\n return this.columns.every(col => !col.width)\r\n },\r\n getScroll () {\r\n if (this.scroll) {\r\n return this.scroll\r\n } else {\r\n if (this.height) {\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }\r\n }\r\n return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.height > this.tableContentHeight ? 0 : this.y }\r\n }\r\n }\r\n },\r\n watch: {\r\n pageSize: {\r\n handler (pageSize) {\r\n this.innerPageSize = pageSize\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n onShowSizeChange (current, pageSize) {\r\n this.innerCurrentPage = current\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', current, pageSize)\r\n },\r\n setPaginationHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.g-table__pagination').getBoundingClientRect()\r\n this.paginationHeight = height\r\n })\r\n },\r\n setTableHeaderHeight () {\r\n this.$nextTick(() => {\r\n const { height } = document.querySelector('.ant-table-header').getBoundingClientRect()\r\n this.tableHeaderHeight = height\r\n })\r\n },\r\n setTableContentHeight () {\r\n const el = document.querySelector('.ant-table-content')\r\n const ob = new ResizeObserver((entries => {\r\n if (this.tableHeaderHeight) return\r\n for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableContentHeight = height\r\n this.setTableHeaderHeight()\r\n })\r\n }\r\n }))\r\n ob.observe(el)\r\n this.obs.push(ob)\r\n },\r\n setRowClassName (record, idx) {\r\n return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n },\r\n onChangePagination (page, pageSize) {\r\n this.innerCurrentPage = page\r\n this.innerPageSize = pageSize\r\n this.$emit('change-page', page, pageSize)\r\n }\r\n },\r\n mounted() {\r\n this.setTableContentHeight()\r\n this.setPaginationHeight()\r\n },\r\n destroyed () {\r\n this.obs.forEach(ob => ob.disconnect())\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n ::v-deep .ant-spin-nested-loading {\r\n height: inherit;\r\n .ant-spin-container {\r\n height: inherit;\r\n .ant-table {\r\n height: inherit;\r\n }\r\n }\r\n }\r\n ::v-deep .ant-table-wrapper {\r\n .ant-table {\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-style: solid;\r\n border-color: var(--idooel-border-color);\r\n }\r\n .ant-table-header {\r\n .ant-table-fixed {\r\n /* border-bottom: 2px solid #53a8ff !important; */\r\n }\r\n }\r\n .ant-table-tbody {\r\n tr {\r\n td {\r\n border-color: var(--idooel-column-border-color);\r\n border-width: calc(var(--idooel-column-border-width) * 1px);;\r\n border-style: solid;\r\n border-top: unset;\r\n border-left: unset;\r\n }\r\n }\r\n }\r\n .ant-table-body {\r\n border-top-width: calc(var(--idooel-border-width) * 1px);\r\n border-top-style: solid;\r\n border-top-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed-left {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n }\r\n .ant-table-body-inner {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-style: solid;\r\n border-right-color: var(--idooel-border-color);\r\n }\r\n .ant-table-fixed {\r\n border-right-width: calc(var(--idooel-border-width) * 1px);\r\n border-right-color: var(--idooel-border-color);\r\n border-right-style: solid;\r\n }\r\n }\r\n .ant-table-fixed-right {\r\n .ant-table-header {\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-color: var(--idooel-border-color);\r\n border-bottom-style: solid;\r\n }\r\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\r\n border-bottom-style: solid;\r\n border-bottom-color: var(--idooel-border-color);\r\n .ant-table-fixed {\r\n border-left-width: calc(var(--idooel-border-width) * 1px);\r\n border-left-style: solid;\r\n border-left-color: var(--idooel-border-color);\r\n }\r\n }\r\n }\r\n padding: 16px;\r\n padding-top: unset;\r\n ::v-deep .g-table__row--even {\r\n background: var(--idooel-row-even-color);\r\n }\r\n .g-table__row--odd {\r\n background: var(--idooel-row-odd-color);\r\n }\r\n .g-table__pagination {\r\n /* margin-top: 8px; */\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: end;\r\n border-width: calc(var(--idooel-border-width) * 1px);\r\n border-color: var(--idooel-border-color);\r\n border-style: solid;\r\n border-top: unset;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n }\r\n}\r\n</style>",".g-table__wrapper {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table {\n border-width: calc(var(--idooel-border-width) * 1px);\n border-style: solid;\n border-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-tbody tr td {\n border-color: var(--idooel-column-border-color);\n border-width: calc(var(--idooel-column-border-width) * 1px);\n border-style: solid;\n border-top: unset;\n border-left: unset;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-body {\n border-top-width: calc(var(--idooel-border-width) * 1px);\n border-top-style: solid;\n border-top-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-body-inner {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-style: solid;\n border-right-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-left .ant-table-fixed {\n border-right-width: calc(var(--idooel-border-width) * 1px);\n border-right-color: var(--idooel-border-color);\n border-right-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-style: solid;\n border-bottom-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-header {\n border-bottom-width: calc(var(--idooel-border-width) * 1px);\n border-bottom-color: var(--idooel-border-color);\n border-bottom-style: solid;\n}\n.g-table__wrapper ::v-deep .ant-table-wrapper .ant-table-fixed-right .ant-table-fixed {\n border-left-width: calc(var(--idooel-border-width) * 1px);\n border-left-style: solid;\n border-left-color: var(--idooel-border-color);\n}\n.g-table__wrapper ::v-deep .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination {\n /* margin-top: 8px; */\n display: flex;\n flex-direction: row;\n justify-content: end;\n border-width: calc(var(--idooel-border-width) * 1px);\n border-color: var(--idooel-border-color);\n border-style: solid;\n border-top: unset;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
1910
1942
|
|
|
1911
1943
|
};
|
|
1912
1944
|
/* scoped */
|
|
1913
|
-
const __vue_scope_id__$w = "data-v-
|
|
1945
|
+
const __vue_scope_id__$w = "data-v-c4b1ea92";
|
|
1914
1946
|
/* module identifier */
|
|
1915
1947
|
const __vue_module_identifier__$w = undefined;
|
|
1916
1948
|
/* functional template */
|
|
@@ -2174,6 +2206,7 @@
|
|
|
2174
2206
|
data() {
|
|
2175
2207
|
return {
|
|
2176
2208
|
tableHeight: 0,
|
|
2209
|
+
tableWidth: 0,
|
|
2177
2210
|
modalFormMeta: {},
|
|
2178
2211
|
modalFormValue: false,
|
|
2179
2212
|
treeData: [],
|
|
@@ -2223,6 +2256,18 @@
|
|
|
2223
2256
|
}
|
|
2224
2257
|
return void 0;
|
|
2225
2258
|
},
|
|
2259
|
+
x() {
|
|
2260
|
+
const {
|
|
2261
|
+
x
|
|
2262
|
+
} = this.tableMeta;
|
|
2263
|
+
return x;
|
|
2264
|
+
},
|
|
2265
|
+
y() {
|
|
2266
|
+
const {
|
|
2267
|
+
y
|
|
2268
|
+
} = this.tableMeta;
|
|
2269
|
+
return y;
|
|
2270
|
+
},
|
|
2226
2271
|
currentTableMode() {
|
|
2227
2272
|
if (!this.currentSelectionColumn) return void 0;
|
|
2228
2273
|
const {
|
|
@@ -2257,7 +2302,8 @@
|
|
|
2257
2302
|
return {
|
|
2258
2303
|
currentTableSelection: this.currentTableSelection,
|
|
2259
2304
|
currentTreeNode: this.currentTreeNodeData,
|
|
2260
|
-
requestTableData: this.requestTableData
|
|
2305
|
+
requestTableData: this.requestTableData,
|
|
2306
|
+
querys: this.tableQuerys
|
|
2261
2307
|
};
|
|
2262
2308
|
},
|
|
2263
2309
|
overrideTableEvent() {
|
|
@@ -2581,8 +2627,10 @@
|
|
|
2581
2627
|
const currentViewportHeight = window.innerHeight;
|
|
2582
2628
|
const tableRef = this.$refs[this.tableRef];
|
|
2583
2629
|
const {
|
|
2584
|
-
top: tableToTop
|
|
2630
|
+
top: tableToTop,
|
|
2631
|
+
width
|
|
2585
2632
|
} = tableRef.$el.getBoundingClientRect();
|
|
2633
|
+
this.tableWidth = width;
|
|
2586
2634
|
this.tableHeight = currentViewportHeight - tableToTop;
|
|
2587
2635
|
},
|
|
2588
2636
|
calculateTreeHeight() {
|
|
@@ -2725,7 +2773,10 @@
|
|
|
2725
2773
|
loading: _vm.loading,
|
|
2726
2774
|
columns: _vm.columns,
|
|
2727
2775
|
total: _vm.total,
|
|
2776
|
+
x: _vm.x,
|
|
2777
|
+
y: _vm.y,
|
|
2728
2778
|
height: _vm.tableHeight,
|
|
2779
|
+
width: _vm.tableWidth,
|
|
2729
2780
|
actions: _vm.actions,
|
|
2730
2781
|
pageSize: _vm.pageSize,
|
|
2731
2782
|
pageSizeOptions: _vm.pageSizeOptions,
|
|
@@ -2774,11 +2825,11 @@
|
|
|
2774
2825
|
/* style */
|
|
2775
2826
|
const __vue_inject_styles__$u = function (inject) {
|
|
2776
2827
|
if (!inject) return
|
|
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 });
|
|
2828
|
+
inject("data-v-82adc510_0", { source: ".ele.model__tree-table[data-v-82adc510] {\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-82adc510] {\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-82adc510] {\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-82adc510] {\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-82adc510] {\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-82adc510] {\n background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-82adc510] {\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-82adc510] {\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":"AAwcA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACvcA;ADycA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;ACvcA;AD0cA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACxcA;AD0cA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACxcA;AD0cA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACxcA;AD2cA;EACA,gBAAA;ACzcA;AD0cA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;ACxcA;AD2cA;EACA,eAAA;EACA,kCAAA;ACzcA;;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 :x=\"x\"\r\n :y=\"y\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" :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 tableWidth: 0,\r\n modalFormMeta: {},\r\n modalFormValue: false,\r\n treeData: [],\r\n tableData: [],\r\n defaultExpandedKeys: [],\r\n defaultSelectedKeys: [],\r\n replaceFields: {\r\n title: 'title',\r\n children: 'children',\r\n key: 'id'\r\n },\r\n loading: false,\r\n total: 0,\r\n tableQuerys: {},\r\n resizeObserverModelTableWrapper: null,\r\n modelTableWrapperHeight: 0,\r\n currentTreeNodeData: {},\r\n 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 x () {\r\n const { x } = this.tableMeta\r\n return x\r\n },\r\n y () {\r\n const { y } = this.tableMeta\r\n return y\r\n },\r\n currentTableMode () {\r\n if (!this.currentSelectionColumn) return void 0\r\n const { multiple } = this.currentSelectionColumn\r\n if (type.isBool(multiple)) {\r\n if (multiple) {\r\n return 'checkbox'\r\n } else {\r\n return 'radio'\r\n }\r\n } else {\r\n return void 0\r\n }\r\n },\r\n modelTableContainerRef () {\r\n return uuidv4()\r\n },\r\n titleMode () {\r\n if (type.isObject(this.title)) {\r\n const { mode = '' } = this.title\r\n return mode\r\n }\r\n return void 0\r\n },\r\n tableRef () {\r\n return uuidv4()\r\n },\r\n exposed () {\r\n return {\r\n currentTableSelection: this.currentTableSelection,\r\n currentTreeNode: this.currentTreeNodeData,\r\n requestTableData: this.requestTableData,\r\n querys: this.tableQuerys\r\n }\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, width } = tableRef.$el.getBoundingClientRect()\r\n this.tableWidth = width\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 });
|
|
2778
2829
|
|
|
2779
2830
|
};
|
|
2780
2831
|
/* scoped */
|
|
2781
|
-
const __vue_scope_id__$u = "data-v-
|
|
2832
|
+
const __vue_scope_id__$u = "data-v-82adc510";
|
|
2782
2833
|
/* module identifier */
|
|
2783
2834
|
const __vue_module_identifier__$u = undefined;
|
|
2784
2835
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -34,7 +34,10 @@
|
|
|
34
34
|
:loading="loading"
|
|
35
35
|
:columns="columns"
|
|
36
36
|
:total="total"
|
|
37
|
+
:x="x"
|
|
38
|
+
:y="y"
|
|
37
39
|
:height="tableHeight"
|
|
40
|
+
:width="tableWidth"
|
|
38
41
|
:actions="actions"
|
|
39
42
|
:pageSize="pageSize"
|
|
40
43
|
:pageSizeOptions="pageSizeOptions"
|
|
@@ -90,6 +93,7 @@ export default {
|
|
|
90
93
|
data () {
|
|
91
94
|
return {
|
|
92
95
|
tableHeight: 0,
|
|
96
|
+
tableWidth: 0,
|
|
93
97
|
modalFormMeta: {},
|
|
94
98
|
modalFormValue: false,
|
|
95
99
|
treeData: [],
|
|
@@ -135,6 +139,14 @@ export default {
|
|
|
135
139
|
}
|
|
136
140
|
return void 0
|
|
137
141
|
},
|
|
142
|
+
x () {
|
|
143
|
+
const { x } = this.tableMeta
|
|
144
|
+
return x
|
|
145
|
+
},
|
|
146
|
+
y () {
|
|
147
|
+
const { y } = this.tableMeta
|
|
148
|
+
return y
|
|
149
|
+
},
|
|
138
150
|
currentTableMode () {
|
|
139
151
|
if (!this.currentSelectionColumn) return void 0
|
|
140
152
|
const { multiple } = this.currentSelectionColumn
|
|
@@ -165,7 +177,8 @@ export default {
|
|
|
165
177
|
return {
|
|
166
178
|
currentTableSelection: this.currentTableSelection,
|
|
167
179
|
currentTreeNode: this.currentTreeNodeData,
|
|
168
|
-
requestTableData: this.requestTableData
|
|
180
|
+
requestTableData: this.requestTableData,
|
|
181
|
+
querys: this.tableQuerys
|
|
169
182
|
}
|
|
170
183
|
},
|
|
171
184
|
overrideTableEvent () {
|
|
@@ -409,7 +422,8 @@ export default {
|
|
|
409
422
|
calculateTableHeight () {
|
|
410
423
|
const currentViewportHeight = window.innerHeight
|
|
411
424
|
const tableRef = this.$refs[this.tableRef]
|
|
412
|
-
const { top: tableToTop } = tableRef.$el.getBoundingClientRect()
|
|
425
|
+
const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()
|
|
426
|
+
this.tableWidth = width
|
|
413
427
|
this.tableHeight = currentViewportHeight - tableToTop
|
|
414
428
|
},
|
|
415
429
|
calculateTreeHeight () {
|
|
@@ -38,12 +38,16 @@ export default {
|
|
|
38
38
|
Actions
|
|
39
39
|
},
|
|
40
40
|
props: {
|
|
41
|
+
// ant table wrapper
|
|
41
42
|
height: {
|
|
42
43
|
type: Number
|
|
43
44
|
},
|
|
45
|
+
width: {
|
|
46
|
+
type: Number
|
|
47
|
+
},
|
|
44
48
|
x: {
|
|
45
49
|
type: Number,
|
|
46
|
-
default:
|
|
50
|
+
default: 1200
|
|
47
51
|
},
|
|
48
52
|
y: {
|
|
49
53
|
type: Number,
|
|
@@ -89,7 +93,9 @@ export default {
|
|
|
89
93
|
tableHeaderHeight: 0,
|
|
90
94
|
paginationHeight: 0,
|
|
91
95
|
innerPageSize: 10,
|
|
92
|
-
innerCurrentPage: 1
|
|
96
|
+
innerCurrentPage: 1,
|
|
97
|
+
tableContentHeight: 0,
|
|
98
|
+
obs: []
|
|
93
99
|
}
|
|
94
100
|
},
|
|
95
101
|
computed: {
|
|
@@ -108,16 +114,22 @@ export default {
|
|
|
108
114
|
return `${this.height - this.paginationHeight - 16}px`
|
|
109
115
|
},
|
|
110
116
|
getScrollHeightByHeight () {
|
|
117
|
+
if (this.height > this.tableContentHeight) {
|
|
118
|
+
return 0
|
|
119
|
+
}
|
|
111
120
|
return this.height - this.tableHeaderHeight - this.paginationHeight
|
|
112
121
|
},
|
|
122
|
+
isFlexColumn () {
|
|
123
|
+
return this.columns.every(col => !col.width)
|
|
124
|
+
},
|
|
113
125
|
getScroll () {
|
|
114
126
|
if (this.scroll) {
|
|
115
127
|
return this.scroll
|
|
116
128
|
} else {
|
|
117
129
|
if (this.height) {
|
|
118
|
-
return { x: this.x, y: this.getScrollHeightByHeight }
|
|
130
|
+
return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.getScrollHeightByHeight }
|
|
119
131
|
}
|
|
120
|
-
return { x: this.x, y: this.y }
|
|
132
|
+
return { x: this.isFlexColumn ? 0 : this.width > this.x ? 0 : this.x, y: this.height > this.tableContentHeight ? 0 : this.y }
|
|
121
133
|
}
|
|
122
134
|
}
|
|
123
135
|
},
|
|
@@ -147,6 +159,21 @@ export default {
|
|
|
147
159
|
this.tableHeaderHeight = height
|
|
148
160
|
})
|
|
149
161
|
},
|
|
162
|
+
setTableContentHeight () {
|
|
163
|
+
const el = document.querySelector('.ant-table-content')
|
|
164
|
+
const ob = new ResizeObserver((entries => {
|
|
165
|
+
if (this.tableHeaderHeight) return
|
|
166
|
+
for (const _ of entries) {
|
|
167
|
+
requestAnimationFrame(() => {
|
|
168
|
+
const { height } = el.getBoundingClientRect()
|
|
169
|
+
this.tableContentHeight = height
|
|
170
|
+
this.setTableHeaderHeight()
|
|
171
|
+
})
|
|
172
|
+
}
|
|
173
|
+
}))
|
|
174
|
+
ob.observe(el)
|
|
175
|
+
this.obs.push(ob)
|
|
176
|
+
},
|
|
150
177
|
setRowClassName (record, idx) {
|
|
151
178
|
return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'
|
|
152
179
|
},
|
|
@@ -157,8 +184,11 @@ export default {
|
|
|
157
184
|
}
|
|
158
185
|
},
|
|
159
186
|
mounted() {
|
|
160
|
-
this.
|
|
187
|
+
this.setTableContentHeight()
|
|
161
188
|
this.setPaginationHeight()
|
|
189
|
+
},
|
|
190
|
+
destroyed () {
|
|
191
|
+
this.obs.forEach(ob => ob.disconnect())
|
|
162
192
|
}
|
|
163
193
|
}
|
|
164
194
|
</script>
|