@idooel/components 0.0.1-beta.54 → 0.0.1-beta.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@idooel/components.esm.js +75 -15
- package/dist/@idooel/components.umd.js +75 -15
- package/package.json +1 -1
- package/packages/form/src/index.vue +7 -1
- package/packages/models/tree-table-model/src/index.vue +16 -2
- package/packages/table/src/index.vue +33 -4
- package/packages/upload/src/index.vue +4 -0
|
@@ -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,21 @@ 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
|
+
for (const _ of entries) {
|
|
1827
|
+
requestAnimationFrame(() => {
|
|
1828
|
+
const {
|
|
1829
|
+
height
|
|
1830
|
+
} = el.getBoundingClientRect();
|
|
1831
|
+
this.tableContentHeight = height;
|
|
1832
|
+
});
|
|
1833
|
+
}
|
|
1834
|
+
});
|
|
1835
|
+
ob.observe(el);
|
|
1836
|
+
this.obs.push(ob);
|
|
1837
|
+
},
|
|
1811
1838
|
setRowClassName(record, idx) {
|
|
1812
1839
|
return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd';
|
|
1813
1840
|
},
|
|
@@ -1820,6 +1847,10 @@ var script$w = {
|
|
|
1820
1847
|
mounted() {
|
|
1821
1848
|
this.setTableHeaderHeight();
|
|
1822
1849
|
this.setPaginationHeight();
|
|
1850
|
+
this.setTableContentHeight();
|
|
1851
|
+
},
|
|
1852
|
+
destroyed() {
|
|
1853
|
+
this.obs.forEach(ob => ob.disconnect());
|
|
1823
1854
|
}
|
|
1824
1855
|
};
|
|
1825
1856
|
|
|
@@ -1899,11 +1930,11 @@ __vue_render__$w._withStripped = true;
|
|
|
1899
1930
|
/* style */
|
|
1900
1931
|
const __vue_inject_styles__$w = function (inject) {
|
|
1901
1932
|
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 });
|
|
1933
|
+
inject("data-v-cbfd578c_0", { source: ".g-table__wrapper[data-v-cbfd578c] {\n padding: 16px;\n padding-top: unset;\n}\n.g-table__wrapper[data-v-cbfd578c] .ant-spin-nested-loading {\n height: inherit;\n}\n.g-table__wrapper[data-v-cbfd578c] .ant-spin-nested-loading .ant-spin-container {\n height: inherit;\n}\n.g-table__wrapper[data-v-cbfd578c] .ant-spin-nested-loading .ant-spin-container .ant-table {\n height: inherit;\n}\n.g-table__wrapper[data-v-cbfd578c] .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-cbfd578c] .ant-table-wrapper .ant-table-header .ant-table-fixed {\n /* border-bottom: 2px solid #53a8ff !important; */\n}\n.g-table__wrapper[data-v-cbfd578c] .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-cbfd578c] .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-cbfd578c] .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-cbfd578c] .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-cbfd578c] .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-cbfd578c] .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-cbfd578c] .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-cbfd578c] .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-cbfd578c] .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-cbfd578c] .g-table__row--even {\n background: var(--idooel-row-even-color);\n}\n.g-table__wrapper .g-table__row--odd[data-v-cbfd578c] {\n background: var(--idooel-row-odd-color);\n}\n.g-table__wrapper .g-table__pagination[data-v-cbfd578c] {\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":"AAmMA;EAyEA,aAAA;EACA,kBAAA;AC1QA;ADiMA;EACA,eAAA;AC/LA;ADgMA;EACA,eAAA;AC9LA;AD+LA;EACA,eAAA;AC7LA;ADkMA;EACA,oDAAA;EACA,mBAAA;EACA,wCAAA;AChMA;ADmMA;EACA,iDAAA;ACjMA;ADsMA;EACA,+CAAA;EACA,2DAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;ACpMA;ADwMA;EACA,wDAAA;EACA,uBAAA;EACA,4CAAA;ACtMA;ADwMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACtMA;ADuMA;EACA,2DAAA;EACA,0BAAA;EACA,+CAAA;ACrMA;ADuMA;EACA,0DAAA;EACA,yBAAA;EACA,8CAAA;ACrMA;ADuMA;EACA,0DAAA;EACA,8CAAA;EACA,yBAAA;ACrMA;ADwMA;EAMA,2DAAA;EACA,0BAAA;EACA,+CAAA;AC3MA;ADoMA;EACA,2DAAA;EACA,+CAAA;EACA,0BAAA;AClMA;ADuMA;EACA,yDAAA;EACA,wBAAA;EACA,6CAAA;ACrMA;AD2MA;EACA,wCAAA;ACzMA;AD2MA;EACA,uCAAA;ACzMA;AD2MA;EACA,qBAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,oDAAA;EACA,wCAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;ACzMA;;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 for (const _ of entries) {\r\n requestAnimationFrame(() => {\r\n const { height } = el.getBoundingClientRect()\r\n this.tableContentHeight = height\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.setTableHeaderHeight()\r\n this.setPaginationHeight()\r\n this.setTableContentHeight()\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
1934
|
|
|
1904
1935
|
};
|
|
1905
1936
|
/* scoped */
|
|
1906
|
-
const __vue_scope_id__$w = "data-v-
|
|
1937
|
+
const __vue_scope_id__$w = "data-v-cbfd578c";
|
|
1907
1938
|
/* module identifier */
|
|
1908
1939
|
const __vue_module_identifier__$w = undefined;
|
|
1909
1940
|
/* functional template */
|
|
@@ -2167,6 +2198,7 @@ var script$u = {
|
|
|
2167
2198
|
data() {
|
|
2168
2199
|
return {
|
|
2169
2200
|
tableHeight: 0,
|
|
2201
|
+
tableWidth: 0,
|
|
2170
2202
|
modalFormMeta: {},
|
|
2171
2203
|
modalFormValue: false,
|
|
2172
2204
|
treeData: [],
|
|
@@ -2216,6 +2248,18 @@ var script$u = {
|
|
|
2216
2248
|
}
|
|
2217
2249
|
return void 0;
|
|
2218
2250
|
},
|
|
2251
|
+
x() {
|
|
2252
|
+
const {
|
|
2253
|
+
x
|
|
2254
|
+
} = this.tableMeta;
|
|
2255
|
+
return x;
|
|
2256
|
+
},
|
|
2257
|
+
y() {
|
|
2258
|
+
const {
|
|
2259
|
+
y
|
|
2260
|
+
} = this.tableMeta;
|
|
2261
|
+
return y;
|
|
2262
|
+
},
|
|
2219
2263
|
currentTableMode() {
|
|
2220
2264
|
if (!this.currentSelectionColumn) return void 0;
|
|
2221
2265
|
const {
|
|
@@ -2250,7 +2294,8 @@ var script$u = {
|
|
|
2250
2294
|
return {
|
|
2251
2295
|
currentTableSelection: this.currentTableSelection,
|
|
2252
2296
|
currentTreeNode: this.currentTreeNodeData,
|
|
2253
|
-
requestTableData: this.requestTableData
|
|
2297
|
+
requestTableData: this.requestTableData,
|
|
2298
|
+
querys: this.tableQuerys
|
|
2254
2299
|
};
|
|
2255
2300
|
},
|
|
2256
2301
|
overrideTableEvent() {
|
|
@@ -2574,8 +2619,10 @@ var script$u = {
|
|
|
2574
2619
|
const currentViewportHeight = window.innerHeight;
|
|
2575
2620
|
const tableRef = this.$refs[this.tableRef];
|
|
2576
2621
|
const {
|
|
2577
|
-
top: tableToTop
|
|
2622
|
+
top: tableToTop,
|
|
2623
|
+
width
|
|
2578
2624
|
} = tableRef.$el.getBoundingClientRect();
|
|
2625
|
+
this.tableWidth = width;
|
|
2579
2626
|
this.tableHeight = currentViewportHeight - tableToTop;
|
|
2580
2627
|
},
|
|
2581
2628
|
calculateTreeHeight() {
|
|
@@ -2718,7 +2765,10 @@ var __vue_render__$u = function () {
|
|
|
2718
2765
|
loading: _vm.loading,
|
|
2719
2766
|
columns: _vm.columns,
|
|
2720
2767
|
total: _vm.total,
|
|
2768
|
+
x: _vm.x,
|
|
2769
|
+
y: _vm.y,
|
|
2721
2770
|
height: _vm.tableHeight,
|
|
2771
|
+
width: _vm.tableWidth,
|
|
2722
2772
|
actions: _vm.actions,
|
|
2723
2773
|
pageSize: _vm.pageSize,
|
|
2724
2774
|
pageSizeOptions: _vm.pageSizeOptions,
|
|
@@ -2767,11 +2817,11 @@ __vue_render__$u._withStripped = true;
|
|
|
2767
2817
|
/* style */
|
|
2768
2818
|
const __vue_inject_styles__$u = function (inject) {
|
|
2769
2819
|
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 });
|
|
2820
|
+
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
2821
|
|
|
2772
2822
|
};
|
|
2773
2823
|
/* scoped */
|
|
2774
|
-
const __vue_scope_id__$u = "data-v-
|
|
2824
|
+
const __vue_scope_id__$u = "data-v-82adc510";
|
|
2775
2825
|
/* module identifier */
|
|
2776
2826
|
const __vue_module_identifier__$u = undefined;
|
|
2777
2827
|
/* functional template */
|
|
@@ -4269,6 +4319,12 @@ var __vue_render__$p = function () {
|
|
|
4269
4319
|
staticStyle: { width: "100%" },
|
|
4270
4320
|
attrs: {
|
|
4271
4321
|
ext: ele.ext,
|
|
4322
|
+
multiple: ele.multiple,
|
|
4323
|
+
accept: ele.accept,
|
|
4324
|
+
extensions: ele.extensions,
|
|
4325
|
+
size: ele.size,
|
|
4326
|
+
icon: ele.icon,
|
|
4327
|
+
url: ele.url,
|
|
4272
4328
|
message: ele.message,
|
|
4273
4329
|
},
|
|
4274
4330
|
}),
|
|
@@ -4524,11 +4580,11 @@ __vue_render__$p._withStripped = true;
|
|
|
4524
4580
|
/* style */
|
|
4525
4581
|
const __vue_inject_styles__$p = function (inject) {
|
|
4526
4582
|
if (!inject) return
|
|
4527
|
-
inject("data-v-c67f525e_0", { source: ".ele__form--wrapper[data-v-c67f525e] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAkPA;EACA,gBAAA;ACjPA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele__form--wrapper\">\r\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n <a-row :gutter=\"24\">\r\n <template v-for=\"ele in elements\">\r\n <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n <template v-if=\"ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-input>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Textarea'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n style=\"width:100%;\">\r\n </ele-textarea>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Select'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :multiple=\"ele.multiple\"\r\n :mode=\"ele.mode\"\r\n :code=\"ele.code\" \r\n :params=\"ele.params\" \r\n @change=\"onChange($event, ele)\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-upload'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n :ext=\"ele.ext\" \r\n :message=\"ele.message\" \r\n style=\"width:100%;\">\r\n </ele-upload>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-date-range \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date-range>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-date\r\n :format=\"ele.format\"\r\n :mode=\"ele.mode\"\r\n :show-time=\"ele.showTime\"\r\n :show-today=\"ele.showToday\"\r\n :value-format=\"ele.valueFormat\"\r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'SelectEntity'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'InputNumber'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n v-bind=\"ele.props\" \r\n style=\"width:100%;\">\r\n </ele-input-number>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Checkbox'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-checkbox>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Radio'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-radio>\r\n </a-form-item>\r\n </template>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </a-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-form',\r\n props: {\r\n disabled: {\r\n type: [Boolean, String],\r\n default: '_routeMeta.disabled'\r\n },\r\n formName: {\r\n type: [Number, String],\r\n default: 'coordinated'\r\n },\r\n elements: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n globalDisabled () {\r\n return this.executeExpression(this.disabled)\r\n },\r\n form () {\r\n return this.$form.createForm(this, { name: this.formName })\r\n },\r\n exposedMethods () {\r\n return {\r\n setFieldsValue: this.setFieldsValue,\r\n getFieldsValue: this.getFieldsValue\r\n }\r\n }\r\n },\r\n methods: {\r\n rebuildRules (rules = []) {\r\n //TODO\r\n rules.map(rule => {\r\n const { validator } = rule\r\n if (validator) {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n }\r\n })\r\n return rules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n },\r\n evalDisabledExpression () {\r\n this.elements.forEach(ele => {\r\n if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n const { disabled } = ele\r\n const ret = this.executeExpression(disabled)\r\n this.$set(ele, '_disabled', ret)\r\n })\r\n },\r\n evalShowExpression () {\r\n this.elements.forEach(ele => {\r\n const { show = true } = ele\r\n const ret = this.executeExpression(show)\r\n this.$set(ele, '_show', ret)\r\n })\r\n },\r\n executeExpression (expression) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return false\r\n return parse(expression, { ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n },\r\n onChange (value, props) {\r\n const { name } = props\r\n this.setFieldsValue({ [name]: value })\r\n this.dispatchExpression()\r\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n },\r\n collectDefaultValues () {\r\n const ret = this.elements.reduce((ret, props) => {\r\n const { name, defaultValue } = props\r\n if (defaultValue) {\r\n ret[name] = defaultValue\r\n }\r\n return ret\r\n }, {})\r\n return ret\r\n },\r\n setDefaultValues () {\r\n const defaultValues = this.collectDefaultValues()\r\n this.setFieldsValue(defaultValues)\r\n },\r\n validateFields () {\r\n let ret = false\r\n this.form.validateFields((error, values) => {\r\n ret = !error\r\n })\r\n return ret\r\n },\r\n setFieldsValue (props = {}) {\r\n this.form.setFieldsValue(props)\r\n },\r\n getFieldsValue () {\r\n return this.form.getFieldsValue()\r\n }\r\n },\r\n mounted() {\r\n this.dispatchExpression()\r\n this.$nextTick(() => {\r\n this.setDefaultValues()\r\n })\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n background: #fff;\r\n .ant-form-item {\r\n }\r\n}\r\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4583
|
+
inject("data-v-15aa1d2d_0", { source: ".ele__form--wrapper[data-v-15aa1d2d] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwPA;EACA,gBAAA;ACvPA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele__form--wrapper\">\r\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n <a-row :gutter=\"24\">\r\n <template v-for=\"ele in elements\">\r\n <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n <template v-if=\"ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-input>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Textarea'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n style=\"width:100%;\">\r\n </ele-textarea>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Select'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\"\r\n :multiple=\"ele.multiple\"\r\n :mode=\"ele.mode\"\r\n :code=\"ele.code\" \r\n :params=\"ele.params\" \r\n @change=\"onChange($event, ele)\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-upload'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n :ext=\"ele.ext\"\r\n :multiple=\"ele.multiple\"\r\n :accept=\"ele.accept\"\r\n :extensions=\"ele.extensions\"\r\n :size=\"ele.size\"\r\n :icon=\"ele.icon\"\r\n :url=\"ele.url\"\r\n :message=\"ele.message\" \r\n style=\"width:100%;\">\r\n </ele-upload>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-date-range \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date-range>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'ele-date'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-date\r\n :format=\"ele.format\"\r\n :mode=\"ele.mode\"\r\n :show-time=\"ele.showTime\"\r\n :show-today=\"ele.showToday\"\r\n :value-format=\"ele.valueFormat\"\r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-date>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'SelectEntity'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-select-entity>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'InputNumber'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n v-bind=\"ele.props\" \r\n style=\"width:100%;\">\r\n </ele-input-number>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Checkbox'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-checkbox>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Radio'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"executeExpression(ele._disabled)\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n style=\"width:100%;\">\r\n </ele-radio>\r\n </a-form-item>\r\n </template>\r\n </a-col>\r\n </template>\r\n </a-row>\r\n </a-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-form',\r\n props: {\r\n disabled: {\r\n type: [Boolean, String],\r\n default: '_routeMeta.disabled'\r\n },\r\n formName: {\r\n type: [Number, String],\r\n default: 'coordinated'\r\n },\r\n elements: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data () {\r\n return {}\r\n },\r\n computed: {\r\n globalDisabled () {\r\n return this.executeExpression(this.disabled)\r\n },\r\n form () {\r\n return this.$form.createForm(this, { name: this.formName })\r\n },\r\n exposedMethods () {\r\n return {\r\n setFieldsValue: this.setFieldsValue,\r\n getFieldsValue: this.getFieldsValue\r\n }\r\n }\r\n },\r\n methods: {\r\n rebuildRules (rules = []) {\r\n //TODO\r\n rules.map(rule => {\r\n const { validator } = rule\r\n if (validator) {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n }\r\n })\r\n return rules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n },\r\n evalDisabledExpression () {\r\n this.elements.forEach(ele => {\r\n if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n const { disabled } = ele\r\n const ret = this.executeExpression(disabled)\r\n this.$set(ele, '_disabled', ret)\r\n })\r\n },\r\n evalShowExpression () {\r\n this.elements.forEach(ele => {\r\n const { show = true } = ele\r\n const ret = this.executeExpression(show)\r\n this.$set(ele, '_show', ret)\r\n })\r\n },\r\n executeExpression (expression) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return false\r\n return parse(expression, { ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n },\r\n onChange (value, props) {\r\n const { name } = props\r\n this.setFieldsValue({ [name]: value })\r\n this.dispatchExpression()\r\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n },\r\n collectDefaultValues () {\r\n const ret = this.elements.reduce((ret, props) => {\r\n const { name, defaultValue } = props\r\n if (defaultValue) {\r\n ret[name] = defaultValue\r\n }\r\n return ret\r\n }, {})\r\n return ret\r\n },\r\n setDefaultValues () {\r\n const defaultValues = this.collectDefaultValues()\r\n this.setFieldsValue(defaultValues)\r\n },\r\n validateFields () {\r\n let ret = false\r\n this.form.validateFields((error, values) => {\r\n ret = !error\r\n })\r\n return ret\r\n },\r\n setFieldsValue (props = {}) {\r\n this.form.setFieldsValue(props)\r\n },\r\n getFieldsValue () {\r\n return this.form.getFieldsValue()\r\n }\r\n },\r\n mounted() {\r\n this.dispatchExpression()\r\n this.$nextTick(() => {\r\n this.setDefaultValues()\r\n })\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n background: #fff;\r\n .ant-form-item {\r\n }\r\n}\r\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4528
4584
|
|
|
4529
4585
|
};
|
|
4530
4586
|
/* scoped */
|
|
4531
|
-
const __vue_scope_id__$p = "data-v-
|
|
4587
|
+
const __vue_scope_id__$p = "data-v-15aa1d2d";
|
|
4532
4588
|
/* module identifier */
|
|
4533
4589
|
const __vue_module_identifier__$p = undefined;
|
|
4534
4590
|
/* functional template */
|
|
@@ -4681,6 +4737,9 @@ var script$n = {
|
|
|
4681
4737
|
ext: {
|
|
4682
4738
|
type: String
|
|
4683
4739
|
},
|
|
4740
|
+
extensions: {
|
|
4741
|
+
type: String
|
|
4742
|
+
},
|
|
4684
4743
|
accept: {
|
|
4685
4744
|
type: String
|
|
4686
4745
|
},
|
|
@@ -5019,6 +5078,7 @@ var __vue_render__$n = function () {
|
|
|
5019
5078
|
"chunk-enabled": _vm.chunkEnabled,
|
|
5020
5079
|
chunk: _vm.chunkConfig,
|
|
5021
5080
|
accept: _vm.accept,
|
|
5081
|
+
extensions: _vm.extensions,
|
|
5022
5082
|
size: _vm.fileSizeLimit,
|
|
5023
5083
|
"post-action": _vm.postAction,
|
|
5024
5084
|
multiple: _vm.multiple,
|
|
@@ -5159,11 +5219,11 @@ __vue_render__$n._withStripped = true;
|
|
|
5159
5219
|
/* style */
|
|
5160
5220
|
const __vue_inject_styles__$n = function (inject) {
|
|
5161
5221
|
if (!inject) return
|
|
5162
|
-
inject("data-v-5206d60c_0", { source: "[data-v-5206d60c] .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n[data-v-5206d60c] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-5206d60c] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-5206d60c] {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-5206d60c] {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-5206d60c] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-5206d60c] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-5206d60c] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-5206d60c] {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-5206d60c] {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-5206d60c] {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-5206d60c] {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-5206d60c] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-5206d60c] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-5206d60c] {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\upload\\src\\index.vue","index.vue"],"names":[],"mappings":"AAuWA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;ACzWA;ADsWA;EACA,0DAAA;ACpWA;ADwWA;EACA,WAAA;ACrWA;ADsWA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACpWA;ADqWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACnWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADoWA;EACA,eAAA;EACA,kCAAA;AClWA;ADqWA;EACA,iBAAA;ACnWA;ADoWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;AClWA;ADoWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;AClWA;ADuWA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACrWA;ADuWA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,uBAAA;ACpWA;ADuWA;EACA,gBAAA;ACrWA;ADsWA;EACA,gBAAA;EACA,eAAA;ACpWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele-upload__wrapper\">\r\n <FileUpload\r\n class=\"ele-upload__inner\"\r\n v-show=\"isShowUploadContainer\"\r\n v-model=\"files\"\r\n :ref=\"uploadRef\"\r\n :drop=\"drop\"\r\n :chunk-enabled=\"chunkEnabled\"\r\n :chunk=\"chunkConfig\"\r\n :accept=\"accept\"\r\n :size=\"fileSizeLimit\"\r\n :post-action=\"postAction\"\r\n :multiple=\"multiple\"\r\n :headers=\"headers\"\r\n :maximum=\"getMaximum\"\r\n @input-file=\"onWatchInputFiles\"\r\n @input=\"onWatchFiles\"\r\n style=\"width: 100%;\">\r\n <section class=\"ele-upload__area\">\r\n <div class=\"ele-upload__area--icon\">\r\n <template v-if=\"iconIsZhWrod\">\r\n {{ icon }}\r\n </template>\r\n <template v-else>\r\n <ele-icon :type=\"icon\"></ele-icon>\r\n </template>\r\n </div>\r\n <div class=\"ele-upload__area--text\">\r\n <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\r\n <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\r\n <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\r\n <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\r\n </div>\r\n </section>\r\n </FileUpload>\r\n <section class=\"ele-files__wrapper\">\r\n <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\r\n <div class=\"ele-file__suffix--icon\">\r\n <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\r\n </div>\r\n <div class=\"ele-file__name\">\r\n <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\r\n <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\r\n <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\r\n </div>\r\n </div>\r\n <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\r\n <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\r\n <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\r\n <ele-icon type=\"delete\"></ele-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport FileUpload from 'vue-upload-component'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { route, net, type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-upload',\r\n components: {\r\n FileUpload\r\n },\r\n model: {\r\n prop: 'value',\r\n event: 'change'\r\n },\r\n props: {\r\n url: {\r\n type: String,\r\n //TODO\r\n default: `zuul/api-file/workbench/file`\r\n },\r\n icon: {\r\n type: String,\r\n default: '上传'\r\n },\r\n size: {\r\n type: Number,\r\n default: 100\r\n },\r\n message: {\r\n type: String,\r\n default: '单击或拖动文件到该区域以上传'\r\n },\r\n ext: {\r\n type: String\r\n },\r\n accept: {\r\n type: String\r\n },\r\n maximum: {\r\n type: Number,\r\n default: 10\r\n },\r\n multiple: {\r\n type: Boolean,\r\n default: false\r\n },\r\n drop: {\r\n type: Boolean,\r\n default: true\r\n },\r\n value: {\r\n type: [String, Array]\r\n },\r\n querys: {\r\n type: Object,\r\n default: () => ({\r\n _csrf: localStorage.getItem('token'),\r\n _t: new Date().valueOf()\r\n })\r\n },\r\n headers: {\r\n type: Object,\r\n default: () => ({\r\n 'X-XSRF-TOKEN': localStorage.getItem('token')\r\n })\r\n },\r\n byteConversion: {\r\n type: Number,\r\n default: 1024 * 1024\r\n },\r\n chunkEnabled: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n files: [],\r\n buildedFiles: [],\r\n saveToServerAsyncPageTimer: null\r\n }\r\n },\r\n watch: {\r\n value: {\r\n async handler (value) {\r\n if (type.isArray(value)) {\r\n // multiple\r\n } else if (type.isEmpty(value)) {\r\n this.files = []\r\n this.buildedFiles = []\r\n } else {\r\n // single\r\n this.fetchFileWithFileId()\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n computed: {\r\n prefixPath () {\r\n return window.prefixPath\r\n },\r\n iconIsZhWrod () {\r\n return type.isZhWord(this.icon)\r\n },\r\n getPayloads () {\r\n return {\r\n override: false\r\n }\r\n },\r\n chunkConfig () {\r\n return {\r\n action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\r\n headers: {\r\n ...this.headers\r\n },\r\n minSize: 3 * this.byteConversion,\r\n maxActive: 3,\r\n maxRetries: 5,\r\n startBody: {\r\n override: true,\r\n path: '/cw'\r\n },\r\n uploadBody: {\r\n override: true,\r\n path: '/cw'\r\n },\r\n finishBody: {\r\n override: true,\r\n path: '/cw'\r\n }\r\n }\r\n },\r\n isFileUploadSuccessed () {\r\n return this.files.every(file => file.success)\r\n },\r\n isShowUploadContainer () {\r\n if (this.multiple) {\r\n if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\r\n return false\r\n } else {\r\n return true\r\n }\r\n } else {\r\n const [file = {}] = this.buildedFiles\r\n if (this.buildedFiles.length < 1) {\r\n return true\r\n }\r\n if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\r\n return false\r\n } else {\r\n return true\r\n }\r\n }\r\n },\r\n getMaximum () {\r\n return this.multiple ? this.maximum : 1\r\n },\r\n fileSizeLimit () {\r\n return this.size * this.byteConversion\r\n },\r\n postAction () {\r\n const ret = route.toQueryString(this.querys)\r\n return `${this.prefixPath}${this.url}?${ret}`\r\n },\r\n uploadRef () {\r\n return uuidv4()\r\n },\r\n fileSuffixIcon () {\r\n return {\r\n 'doc': { name: 'icon-doc' },\r\n 'html': { name: 'icon-html' },\r\n 'mp4': { name: 'icon-mp' },\r\n 'pdf': { name: 'icon-pdf' },\r\n 'ppt': { name: 'icon-ppt' },\r\n 'psd': { name: 'icon-psd' },\r\n 'rtf': { name: 'icon-rtf' },\r\n 'txt': { name: 'icon-txt' },\r\n 'vis': { name: 'icon-vis' },\r\n 'xls': { name: 'icon-xls' },\r\n 'xml': { name: 'icon-xml' },\r\n 'zip': { name: 'icon-zip' },\r\n 'jpg': { name: 'icon-img' },\r\n 'mp3': { name: 'icon-mp1' },\r\n }\r\n },\r\n fileIds () {\r\n const fileIds = this.buildedFiles.map(file => {\r\n return file.fileID\r\n })\r\n return this.multiple ? fileIds : fileIds[0]\r\n },\r\n fileResponseData () {\r\n return this.multiple ? this.buildedFiles : this.buildedFiles[0]\r\n }\r\n },\r\n methods: {\r\n async fetchFileWithFileId () {\r\n if (!this.value) return\r\n await net.get(\r\n `/api-file/file/${this.value}`\r\n ).then(resp => {\r\n const { data } = resp\r\n this.buildedFiles = [data]\r\n this.files = [data]\r\n })\r\n },\r\n handleClickDownload (file) {\r\n const { fileID: fileId } = file\r\n window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\r\n },\r\n handleClickDelete (file) {\r\n this.$refs[this.uploadRef].remove(file)\r\n const { fileID } = file\r\n this.files = this.files.filter(file => file.fileID !== fileID)\r\n this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\r\n this.$emit('change', this.fileIds)\r\n },\r\n onWatchFiles (files) {\r\n this.files = files\r\n this.buildedFiles = this.files.map(file => {\r\n return {\r\n ...file.response.data,\r\n ...file\r\n }\r\n })\r\n if (this.isFileUploadSuccessed) {\r\n this.$emit('change', this.fileIds)\r\n this.$emit('on-success', this.fileResponseData)\r\n }\r\n },\r\n async saveToServerAsyncPage (payloads = {}) {\r\n net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \r\n headers: {\r\n 'Content-Type': 'multipart/form-data'\r\n }\r\n }).then(resp =>{\r\n const { data } = resp\r\n if (data !== 'saveToServerAsyncPage') {\r\n clearInterval(this.saveToServerAsyncPageTimer)\r\n }\r\n })\r\n // const ret = await net.post({\r\n // url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\r\n // method: 'POST',\r\n // data: { ...payloads }\r\n // }).then(resp => {\r\n // const { data: { data, code, message } } = resp\r\n // if (code !== '2000') {\r\n // this.$Message.error(message)\r\n // return\r\n // }\r\n // if (data !== 'saveToServerAsyncPage') {\r\n // clearInterval(timer)\r\n // const { fileID, size } = data\r\n // this.$emit('on-success', { ...data, fileId: fileID })\r\n // this.$Message.success('同步成功')\r\n // return { fileId: fileID, size }\r\n // }\r\n // })\r\n // return ret\r\n },\r\n onWatchInputFiles (newFile, oldFile) {\r\n if (newFile && !oldFile) {\r\n // add file\r\n console.log('add', newFile)\r\n }\r\n if (newFile && oldFile) {\r\n // update file\r\n console.log('update', newFile)\r\n const { success, active, chunk, response } = newFile\r\n if (chunk && success && !active) {\r\n console.log('chunk end')\r\n const { data: { file, type } } = response\r\n const payloads = {\r\n filePath: file.match(/\\/cw(.*)/)[0],\r\n asyncID: uuidv4(),\r\n isDeleteOrigin: false,\r\n toImage: type === 'pdf' ? true : false,\r\n unzip: type === 'zip' ? true : false,\r\n _csrf: localStorage.getItem('token')\r\n }\r\n this.saveToServerAsyncPageTimer = setInterval(() => {\r\n this.saveToServerAsyncPage(payloads)\r\n }, 2000)\r\n }\r\n }\r\n if (!newFile && oldFile) {\r\n // delete file\r\n console.log('delete')\r\n }\r\n if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\r\n if (!this.$refs[this.uploadRef].active) {\r\n this.$refs[this.uploadRef].active = true\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ele-upload__inner {\r\n opacity: 1 !important;\r\n cursor: pointer;\r\n border: 1px dashed var(--idooel-form-title-border-color);\r\n background: var(--idooel-form-upload-bg-color) !important;\r\n &:hover {\r\n border-color: var(--idooel-form-upload-border-hover-color);\r\n }\r\n border-radius: var(--idooel-form-border-radius);\r\n}\r\n.ele-upload__wrapper {\r\n width: 100%;\r\n .ele-upload__area {\r\n padding: 16px;\r\n width: 100%;\r\n height: 80px;\r\n display: flex;\r\n flex-direction: row;\r\n .ele-upload__area--icon {\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n font-size: 16x;\r\n .anticon-cloud-upload {\r\n font-size: 48px;\r\n color: var(--idooel-primary-color);\r\n }\r\n .anticon {\r\n font-size: 48px;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n .ele-upload__area--text {\r\n margin-left: 16px;\r\n .ele-upload__message {\r\n font-size: 16px;\r\n color: var(--idoole-black-088);\r\n text-align: left;\r\n }\r\n .ele-upload__ext {\r\n text-align: left;\r\n font-size: 14px;\r\n color: var(--idoole-black-06);\r\n }\r\n }\r\n }\r\n .ele-files__wrapper {\r\n .ele-file__item {\r\n width: 100%;\r\n margin-top: 8px;\r\n padding: 8px 12px;\r\n border-radius: var(--idooel-form-border-radius);\r\n background: var(--idooel-form-upload-bg-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n .ele-file__suffix--icon {}\r\n .ele-file__name {\r\n flex: 1;\r\n text-align: left;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n font-size: 14px;\r\n margin-left: 8px;\r\n cursor: pointer;\r\n .ele-file__inner {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n .ele-file__delete {\r\n margin-left: 8px;\r\n .ele-file__delete--icon {\r\n margin-left: 8px;\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>","::v-deep .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5222
|
+
inject("data-v-ea670694_0", { source: "[data-v-ea670694] .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n[data-v-ea670694] .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n.ele-upload__wrapper[data-v-ea670694] {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area[data-v-ea670694] {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon[data-v-ea670694] {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload[data-v-ea670694] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon[data-v-ea670694] {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text[data-v-ea670694] {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message[data-v-ea670694] {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext[data-v-ea670694] {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item[data-v-ea670694] {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name[data-v-ea670694] {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner[data-v-ea670694] {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete[data-v-ea670694] {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon[data-v-ea670694] {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\upload\\src\\index.vue","index.vue"],"names":[],"mappings":"AA2WA;EACA,qBAAA;EACA,eAAA;EACA,wDAAA;EACA,yDAAA;EAIA,+CAAA;AC7WA;AD0WA;EACA,0DAAA;ACxWA;AD4WA;EACA,WAAA;ACzWA;AD0WA;EACA,aAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;ACxWA;ADyWA;EACA,kCAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACvWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADwWA;EACA,eAAA;EACA,kCAAA;ACtWA;ADyWA;EACA,iBAAA;ACvWA;ADwWA;EACA,eAAA;EACA,8BAAA;EACA,gBAAA;ACtWA;ADwWA;EACA,gBAAA;EACA,eAAA;EACA,6BAAA;ACtWA;AD2WA;EACA,WAAA;EACA,eAAA;EACA,iBAAA;EACA,+CAAA;EACA,8CAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACzWA;AD2WA;EACA,OAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,uBAAA;ACxWA;AD2WA;EACA,gBAAA;ACzWA;AD0WA;EACA,gBAAA;EACA,eAAA;ACxWA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele-upload__wrapper\">\r\n <FileUpload\r\n class=\"ele-upload__inner\"\r\n v-show=\"isShowUploadContainer\"\r\n v-model=\"files\"\r\n :ref=\"uploadRef\"\r\n :drop=\"drop\"\r\n :chunk-enabled=\"chunkEnabled\"\r\n :chunk=\"chunkConfig\"\r\n :accept=\"accept\"\r\n :extensions=\"extensions\"\r\n :size=\"fileSizeLimit\"\r\n :post-action=\"postAction\"\r\n :multiple=\"multiple\"\r\n :headers=\"headers\"\r\n :maximum=\"getMaximum\"\r\n @input-file=\"onWatchInputFiles\"\r\n @input=\"onWatchFiles\"\r\n style=\"width: 100%;\">\r\n <section class=\"ele-upload__area\">\r\n <div class=\"ele-upload__area--icon\">\r\n <template v-if=\"iconIsZhWrod\">\r\n {{ icon }}\r\n </template>\r\n <template v-else>\r\n <ele-icon :type=\"icon\"></ele-icon>\r\n </template>\r\n </div>\r\n <div class=\"ele-upload__area--text\">\r\n <div class=\"ele-upload__message\" v-if=\"message\" v-html=\"message\"></div>\r\n <div class=\"ele-upload__message\" v-else>单击或拖动文件到该区域以上传</div>\r\n <div class=\"ele-upload__ext\" v-if=\"ext\" v-html=\"ext\"></div>\r\n <div class=\"ele-upload__ext\" v-else>文件小于{{ size }}M</div>\r\n </div>\r\n </section>\r\n </FileUpload>\r\n <section class=\"ele-files__wrapper\">\r\n <div class=\"ele-file__item\" v-for=\"(file, idx) in buildedFiles\" :key=\"idx\">\r\n <div class=\"ele-file__suffix--icon\">\r\n <ele-icon :type=\"fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'\"></ele-icon>\r\n </div>\r\n <div class=\"ele-file__name\">\r\n <div class=\"ele-file__inner\" @click=\"handleClickDownload(file)\">{{ file.name }}</div>\r\n <div v-if=\"(!file.success && file.progress)\" class=\"ele-uplpad__progress\">\r\n <a-progress :strokeWidth=\"2\" :percent=\"Number(file.progress)\" size=\"small\" />\r\n </div>\r\n </div>\r\n <div class=\"ele-file__delete\" v-if=\"file.success || file.error || !file.response\">\r\n <span class=\"ele-file__size\">{{ (file.size / byteConversion).toFixed(2) }}M</span>\r\n <span class=\"ele-file__delete--icon\" @click=\"handleClickDelete(file)\">\r\n <ele-icon type=\"delete\"></ele-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport FileUpload from 'vue-upload-component'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { route, net, type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-upload',\r\n components: {\r\n FileUpload\r\n },\r\n model: {\r\n prop: 'value',\r\n event: 'change'\r\n },\r\n props: {\r\n url: {\r\n type: String,\r\n //TODO\r\n default: `zuul/api-file/workbench/file`\r\n },\r\n icon: {\r\n type: String,\r\n default: '上传'\r\n },\r\n size: {\r\n type: Number,\r\n default: 100\r\n },\r\n message: {\r\n type: String,\r\n default: '单击或拖动文件到该区域以上传'\r\n },\r\n ext: {\r\n type: String\r\n },\r\n extensions: {\r\n type: String\r\n },\r\n accept: {\r\n type: String\r\n },\r\n maximum: {\r\n type: Number,\r\n default: 10\r\n },\r\n multiple: {\r\n type: Boolean,\r\n default: false\r\n },\r\n drop: {\r\n type: Boolean,\r\n default: true\r\n },\r\n value: {\r\n type: [String, Array]\r\n },\r\n querys: {\r\n type: Object,\r\n default: () => ({\r\n _csrf: localStorage.getItem('token'),\r\n _t: new Date().valueOf()\r\n })\r\n },\r\n headers: {\r\n type: Object,\r\n default: () => ({\r\n 'X-XSRF-TOKEN': localStorage.getItem('token')\r\n })\r\n },\r\n byteConversion: {\r\n type: Number,\r\n default: 1024 * 1024\r\n },\r\n chunkEnabled: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n files: [],\r\n buildedFiles: [],\r\n saveToServerAsyncPageTimer: null\r\n }\r\n },\r\n watch: {\r\n value: {\r\n async handler (value) {\r\n if (type.isArray(value)) {\r\n // multiple\r\n } else if (type.isEmpty(value)) {\r\n this.files = []\r\n this.buildedFiles = []\r\n } else {\r\n // single\r\n this.fetchFileWithFileId()\r\n }\r\n },\r\n immediate: true\r\n }\r\n },\r\n computed: {\r\n prefixPath () {\r\n return window.prefixPath\r\n },\r\n iconIsZhWrod () {\r\n return type.isZhWord(this.icon)\r\n },\r\n getPayloads () {\r\n return {\r\n override: false\r\n }\r\n },\r\n chunkConfig () {\r\n return {\r\n action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,\r\n headers: {\r\n ...this.headers\r\n },\r\n minSize: 3 * this.byteConversion,\r\n maxActive: 3,\r\n maxRetries: 5,\r\n startBody: {\r\n override: true,\r\n path: '/cw'\r\n },\r\n uploadBody: {\r\n override: true,\r\n path: '/cw'\r\n },\r\n finishBody: {\r\n override: true,\r\n path: '/cw'\r\n }\r\n }\r\n },\r\n isFileUploadSuccessed () {\r\n return this.files.every(file => file.success)\r\n },\r\n isShowUploadContainer () {\r\n if (this.multiple) {\r\n if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {\r\n return false\r\n } else {\r\n return true\r\n }\r\n } else {\r\n const [file = {}] = this.buildedFiles\r\n if (this.buildedFiles.length < 1) {\r\n return true\r\n }\r\n if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {\r\n return false\r\n } else {\r\n return true\r\n }\r\n }\r\n },\r\n getMaximum () {\r\n return this.multiple ? this.maximum : 1\r\n },\r\n fileSizeLimit () {\r\n return this.size * this.byteConversion\r\n },\r\n postAction () {\r\n const ret = route.toQueryString(this.querys)\r\n return `${this.prefixPath}${this.url}?${ret}`\r\n },\r\n uploadRef () {\r\n return uuidv4()\r\n },\r\n fileSuffixIcon () {\r\n return {\r\n 'doc': { name: 'icon-doc' },\r\n 'html': { name: 'icon-html' },\r\n 'mp4': { name: 'icon-mp' },\r\n 'pdf': { name: 'icon-pdf' },\r\n 'ppt': { name: 'icon-ppt' },\r\n 'psd': { name: 'icon-psd' },\r\n 'rtf': { name: 'icon-rtf' },\r\n 'txt': { name: 'icon-txt' },\r\n 'vis': { name: 'icon-vis' },\r\n 'xls': { name: 'icon-xls' },\r\n 'xml': { name: 'icon-xml' },\r\n 'zip': { name: 'icon-zip' },\r\n 'jpg': { name: 'icon-img' },\r\n 'mp3': { name: 'icon-mp1' },\r\n }\r\n },\r\n fileIds () {\r\n const fileIds = this.buildedFiles.map(file => {\r\n return file.fileID\r\n })\r\n return this.multiple ? fileIds : fileIds[0]\r\n },\r\n fileResponseData () {\r\n return this.multiple ? this.buildedFiles : this.buildedFiles[0]\r\n }\r\n },\r\n methods: {\r\n async fetchFileWithFileId () {\r\n if (!this.value) return\r\n await net.get(\r\n `/api-file/file/${this.value}`\r\n ).then(resp => {\r\n const { data } = resp\r\n this.buildedFiles = [data]\r\n this.files = [data]\r\n })\r\n },\r\n handleClickDownload (file) {\r\n const { fileID: fileId } = file\r\n window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)\r\n },\r\n handleClickDelete (file) {\r\n this.$refs[this.uploadRef].remove(file)\r\n const { fileID } = file\r\n this.files = this.files.filter(file => file.fileID !== fileID)\r\n this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)\r\n this.$emit('change', this.fileIds)\r\n },\r\n onWatchFiles (files) {\r\n this.files = files\r\n this.buildedFiles = this.files.map(file => {\r\n return {\r\n ...file.response.data,\r\n ...file\r\n }\r\n })\r\n if (this.isFileUploadSuccessed) {\r\n this.$emit('change', this.fileIds)\r\n this.$emit('on-success', this.fileResponseData)\r\n }\r\n },\r\n async saveToServerAsyncPage (payloads = {}) {\r\n net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { \r\n headers: {\r\n 'Content-Type': 'multipart/form-data'\r\n }\r\n }).then(resp =>{\r\n const { data } = resp\r\n if (data !== 'saveToServerAsyncPage') {\r\n clearInterval(this.saveToServerAsyncPageTimer)\r\n }\r\n })\r\n // const ret = await net.post({\r\n // url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',\r\n // method: 'POST',\r\n // data: { ...payloads }\r\n // }).then(resp => {\r\n // const { data: { data, code, message } } = resp\r\n // if (code !== '2000') {\r\n // this.$Message.error(message)\r\n // return\r\n // }\r\n // if (data !== 'saveToServerAsyncPage') {\r\n // clearInterval(timer)\r\n // const { fileID, size } = data\r\n // this.$emit('on-success', { ...data, fileId: fileID })\r\n // this.$Message.success('同步成功')\r\n // return { fileId: fileID, size }\r\n // }\r\n // })\r\n // return ret\r\n },\r\n onWatchInputFiles (newFile, oldFile) {\r\n if (newFile && !oldFile) {\r\n // add file\r\n console.log('add', newFile)\r\n }\r\n if (newFile && oldFile) {\r\n // update file\r\n console.log('update', newFile)\r\n const { success, active, chunk, response } = newFile\r\n if (chunk && success && !active) {\r\n console.log('chunk end')\r\n const { data: { file, type } } = response\r\n const payloads = {\r\n filePath: file.match(/\\/cw(.*)/)[0],\r\n asyncID: uuidv4(),\r\n isDeleteOrigin: false,\r\n toImage: type === 'pdf' ? true : false,\r\n unzip: type === 'zip' ? true : false,\r\n _csrf: localStorage.getItem('token')\r\n }\r\n this.saveToServerAsyncPageTimer = setInterval(() => {\r\n this.saveToServerAsyncPage(payloads)\r\n }, 2000)\r\n }\r\n }\r\n if (!newFile && oldFile) {\r\n // delete file\r\n console.log('delete')\r\n }\r\n if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {\r\n if (!this.$refs[this.uploadRef].active) {\r\n this.$refs[this.uploadRef].active = true\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n::v-deep .ele-upload__inner {\r\n opacity: 1 !important;\r\n cursor: pointer;\r\n border: 1px dashed var(--idooel-form-title-border-color);\r\n background: var(--idooel-form-upload-bg-color) !important;\r\n &:hover {\r\n border-color: var(--idooel-form-upload-border-hover-color);\r\n }\r\n border-radius: var(--idooel-form-border-radius);\r\n}\r\n.ele-upload__wrapper {\r\n width: 100%;\r\n .ele-upload__area {\r\n padding: 16px;\r\n width: 100%;\r\n height: 80px;\r\n display: flex;\r\n flex-direction: row;\r\n .ele-upload__area--icon {\r\n color: var(--idooel-primary-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n font-size: 16x;\r\n .anticon-cloud-upload {\r\n font-size: 48px;\r\n color: var(--idooel-primary-color);\r\n }\r\n .anticon {\r\n font-size: 48px;\r\n color: var(--idooel-primary-color);\r\n }\r\n }\r\n .ele-upload__area--text {\r\n margin-left: 16px;\r\n .ele-upload__message {\r\n font-size: 16px;\r\n color: var(--idoole-black-088);\r\n text-align: left;\r\n }\r\n .ele-upload__ext {\r\n text-align: left;\r\n font-size: 14px;\r\n color: var(--idoole-black-06);\r\n }\r\n }\r\n }\r\n .ele-files__wrapper {\r\n .ele-file__item {\r\n width: 100%;\r\n margin-top: 8px;\r\n padding: 8px 12px;\r\n border-radius: var(--idooel-form-border-radius);\r\n background: var(--idooel-form-upload-bg-color);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n .ele-file__suffix--icon {}\r\n .ele-file__name {\r\n flex: 1;\r\n text-align: left;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n font-size: 14px;\r\n margin-left: 8px;\r\n cursor: pointer;\r\n .ele-file__inner {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n .ele-file__delete {\r\n margin-left: 8px;\r\n .ele-file__delete--icon {\r\n margin-left: 8px;\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>","::v-deep .ele-upload__inner {\n opacity: 1 !important;\n cursor: pointer;\n border: 1px dashed var(--idooel-form-title-border-color);\n background: var(--idooel-form-upload-bg-color) !important;\n border-radius: var(--idooel-form-border-radius);\n}\n::v-deep .ele-upload__inner:hover {\n border-color: var(--idooel-form-upload-border-hover-color);\n}\n\n.ele-upload__wrapper {\n width: 100%;\n}\n.ele-upload__wrapper .ele-upload__area {\n padding: 16px;\n width: 100%;\n height: 80px;\n display: flex;\n flex-direction: row;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon {\n color: var(--idooel-primary-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 16x;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon-cloud-upload {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--icon .anticon {\n font-size: 48px;\n color: var(--idooel-primary-color);\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text {\n margin-left: 16px;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__message {\n font-size: 16px;\n color: var(--idoole-black-088);\n text-align: left;\n}\n.ele-upload__wrapper .ele-upload__area .ele-upload__area--text .ele-upload__ext {\n text-align: left;\n font-size: 14px;\n color: var(--idoole-black-06);\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item {\n width: 100%;\n margin-top: 8px;\n padding: 8px 12px;\n border-radius: var(--idooel-form-border-radius);\n background: var(--idooel-form-upload-bg-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name {\n flex: 1;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n font-size: 14px;\n margin-left: 8px;\n cursor: pointer;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__name .ele-file__inner {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete {\n margin-left: 8px;\n}\n.ele-upload__wrapper .ele-files__wrapper .ele-file__item .ele-file__delete .ele-file__delete--icon {\n margin-left: 8px;\n cursor: pointer;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
5163
5223
|
|
|
5164
5224
|
};
|
|
5165
5225
|
/* scoped */
|
|
5166
|
-
const __vue_scope_id__$n = "data-v-
|
|
5226
|
+
const __vue_scope_id__$n = "data-v-ea670694";
|
|
5167
5227
|
/* module identifier */
|
|
5168
5228
|
const __vue_module_identifier__$n = undefined;
|
|
5169
5229
|
/* functional template */
|