@vtx/components 3.1.14 → 3.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/vtx-datagrid/style/index.css +1 -1
  2. package/lib/vtx-datagrid/style/index.less +214 -214
  3. package/lib/vtx-export/index.js +6 -3
  4. package/lib/vtx-export/index.js.map +1 -1
  5. package/lib/vtx-form-layout/style/index.less +215 -215
  6. package/package.json +1 -1
package/lib/vtx-datagrid/style/index.css CHANGED
@@ -67,9 +67,9 @@
67
67
  }
68
68
  .vtx-datagrid .ant-table-tbody > tr.ant-table-placeholder {
69
69
  position: absolute;
70
+ top: 25%;
70
71
  right: 0;
71
72
  left: 0;
72
- top: 25%;
73
73
  background-color: transparent;
74
74
  border-top: none;
75
75
  }
package/lib/vtx-datagrid/style/index.less CHANGED
@@ -1,214 +1,214 @@
1
- @import (reference) '~antd/lib/style/themes/index.less';
2
- @import '../../style/themes/index';
3
-
4
- @prefix-cls: vtx-datagrid;
5
-
6
- .@{prefix-cls} {
7
- position: relative;
8
- overflow: hidden;
9
-
10
- &-fit {
11
- height: 100%;
12
- .ant-table-container {
13
- border-left: none !important;
14
- table > thead > tr th:first-child {
15
- border-left: 1px solid @table-border-color;
16
- }
17
- }
18
- .ant-table-body {
19
- overflow-y: auto !important;
20
- }
21
- .ant-table-header,
22
- .ant-table-body {
23
- &::-webkit-scrollbar {
24
- width: @webkit-scrollbar-width;
25
- height: @webkit-scrollbar-height;
26
- background-color: @webkit-scrollbar-color;
27
- }
28
-
29
- &::-webkit-scrollbar-thumb {
30
- background-color: @webkit-scrollbar-thumb-color;
31
- border-radius: @webkit-scrollbar-thumb-radius;
32
- }
33
- > table {
34
- min-height: 1px;
35
- }
36
- }
37
- .ant-table-tbody > tr {
38
- &:nth-child(odd) {
39
- background: @table-row-odd;
40
- > td {
41
- background: @table-row-odd !important;
42
- }
43
- }
44
- > td:first-child {
45
- border-left: 1px solid @table-border-color;
46
- }
47
- }
48
- .ant-table-fixed-header .ant-table-scroll .ant-table-header {
49
- min-width: 5px !important;
50
- }
51
- .ant-table-pagination {
52
- position: absolute;
53
- right: 0;
54
- bottom: 0;
55
- }
56
- .ant-spin-nested-loading {
57
- height: 100%;
58
- .ant-spin-container {
59
- position: relative;
60
- height: 100%;
61
- .ant-table {
62
- height: 100%;
63
- }
64
- }
65
- }
66
- }
67
- &-noFit {
68
- .ant-table-tbody > tr {
69
- &:nth-child(even) when(@theme=default) {
70
- background: #f6f6f6;
71
- > td {
72
- background: #f6f6f6 !important;
73
- }
74
- }
75
- }
76
- }
77
- // 固定列目前没有办法用细的滚动条
78
- // .ant-table-has-fix-right {
79
- // .ant-table-body {
80
- // &::-webkit-scrollbar {
81
- // width: 5px;
82
- // height: 5px;
83
- // }
84
- // }
85
- // }
86
- // mac 和 windows下有差异，window chrome下滚动条宽度17px，mac chrome下15px
87
- // &-userAgent-mac {
88
- // .ant-table-has-fix-right {
89
- // .ant-table-body {
90
- // &::-webkit-scrollbar {
91
- // width: 5px;
92
- // height: 5px;
93
- // }
94
- // }
95
- // }
96
- // }
97
- .ant-table-thead > tr > th when(@theme=default) {
98
- // antd4.0 半透明会重叠
99
- // background-color: fade(#1890ff, 8);
100
- background-color: rgba(237, 246, 255, 1);
101
- }
102
- .ant-table-tbody > tr {
103
- // &:nth-child(even) when(@theme=default) {
104
- // background: #f6f6f6;
105
- // }
106
-
107
- &.ant-table-placeholder {
108
- position: absolute;
109
- // top: auto;
110
- right: 0;
111
- // bottom: auto;
112
- left: 0;
113
- top: 25%;
114
- background-color: transparent;
115
- border-top: none;
116
- // height: 100%;
117
- & > td.ant-table-cell {
118
- display: flex;
119
- align-items: center;
120
- justify-content: center;
121
- width: 100%;
122
- height: 100%;
123
- // border-right: @border-width-base @border-style-base @table-border-color;
124
- // border-left: @border-width-base @border-style-base @table-border-color;
125
- border: none;
126
- }
127
- }
128
- }
129
- // fix: checkbox 选中时 固定列 最上面一层透明会 和下面重叠
130
- // .ant-table-tbody > tr.ant-table-row-selected td {
131
- // background: transparent;
132
- // }
133
- &-alert {
134
- margin-bottom: 8px;
135
- &-message when(@theme=default) {
136
- color: fade(@black, 65%);
137
- }
138
- &-message when(@theme=dark) {
139
- color: @text-color;
140
- }
141
- &-info-content > strong {
142
- margin: 0 4px;
143
- color: #13c2c2;
144
- }
145
- &-info-option {
146
- margin-left: 10px;
147
- }
148
- }
149
- &-nodata {
150
- .ant-table-scroll {
151
- overflow-y: hidden;
152
- }
153
- }
154
- &-toolbar {
155
- display: table;
156
- width: 100%;
157
- margin: 16px 0;
158
- color: @text-color;
159
- }
160
- &-toolbar-left,
161
- &-toolbar-right {
162
- display: inline-block;
163
- display: table-cell;
164
- vertical-align: middle;
165
- }
166
- &-toolbar-left {
167
- color: @text-color;
168
- font-size: 16px;
169
- }
170
- &-toolbar-right {
171
- float: right;
172
- }
173
- &-toolbar-setting-item {
174
- display: inline-block;
175
- margin-left: 16px;
176
- color: @icon-color;
177
- font-size: 16px;
178
- vertical-align: middle;
179
- cursor: pointer;
180
- &:hover {
181
- color: @icon-color-hover;
182
- }
183
- }
184
- &-column-setting-title {
185
- height: 32px;
186
- line-height: 32px;
187
- a {
188
- display: inline-block;
189
- float: right;
190
- vertical-align: middle;
191
- }
192
- }
193
- &-column-setting-checkbox-wrapper {
194
- color: @text-color;
195
- vertical-align: middle;
196
- }
197
- &-space-item {
198
- display: inline-block;
199
- vertical-align: middle;
200
- }
201
- .react-resizable {
202
- position: relative;
203
- background-clip: padding-box;
204
- }
205
- .react-resizable-handle {
206
- position: absolute;
207
- right: -5px;
208
- bottom: 0;
209
- z-index: 1;
210
- width: 10px;
211
- height: 100%;
212
- cursor: col-resize;
213
- }
214
- }
1
+ @import (reference) '~antd/lib/style/themes/index.less';
2
+ @import '../../style/themes/index';
3
+
4
+ @prefix-cls: vtx-datagrid;
5
+
6
+ .@{prefix-cls} {
7
+ position: relative;
8
+ overflow: hidden;
9
+
10
+ &-fit {
11
+ height: 100%;
12
+ .ant-table-container {
13
+ border-left: none !important;
14
+ table > thead > tr th:first-child {
15
+ border-left: 1px solid @table-border-color;
16
+ }
17
+ }
18
+ .ant-table-body {
19
+ overflow-y: auto !important;
20
+ }
21
+ .ant-table-header,
22
+ .ant-table-body {
23
+ &::-webkit-scrollbar {
24
+ width: @webkit-scrollbar-width;
25
+ height: @webkit-scrollbar-height;
26
+ background-color: @webkit-scrollbar-color;
27
+ }
28
+
29
+ &::-webkit-scrollbar-thumb {
30
+ background-color: @webkit-scrollbar-thumb-color;
31
+ border-radius: @webkit-scrollbar-thumb-radius;
32
+ }
33
+ > table {
34
+ min-height: 1px;
35
+ }
36
+ }
37
+ .ant-table-tbody > tr {
38
+ &:nth-child(odd) {
39
+ background: @table-row-odd;
40
+ > td {
41
+ background: @table-row-odd !important;
42
+ }
43
+ }
44
+ > td:first-child {
45
+ border-left: 1px solid @table-border-color;
46
+ }
47
+ }
48
+ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
49
+ min-width: 5px !important;
50
+ }
51
+ .ant-table-pagination {
52
+ position: absolute;
53
+ right: 0;
54
+ bottom: 0;
55
+ }
56
+ .ant-spin-nested-loading {
57
+ height: 100%;
58
+ .ant-spin-container {
59
+ position: relative;
60
+ height: 100%;
61
+ .ant-table {
62
+ height: 100%;
63
+ }
64
+ }
65
+ }
66
+ }
67
+ &-noFit {
68
+ .ant-table-tbody > tr {
69
+ &:nth-child(even) when(@theme=default) {
70
+ background: #f6f6f6;
71
+ > td {
72
+ background: #f6f6f6 !important;
73
+ }
74
+ }
75
+ }
76
+ }
77
+ // 固定列目前没有办法用细的滚动条
78
+ // .ant-table-has-fix-right {
79
+ // .ant-table-body {
80
+ // &::-webkit-scrollbar {
81
+ // width: 5px;
82
+ // height: 5px;
83
+ // }
84
+ // }
85
+ // }
86
+ // mac 和 windows下有差异，window chrome下滚动条宽度17px，mac chrome下15px
87
+ // &-userAgent-mac {
88
+ // .ant-table-has-fix-right {
89
+ // .ant-table-body {
90
+ // &::-webkit-scrollbar {
91
+ // width: 5px;
92
+ // height: 5px;
93
+ // }
94
+ // }
95
+ // }
96
+ // }
97
+ .ant-table-thead > tr > th when(@theme=default) {
98
+ // antd4.0 半透明会重叠
99
+ // background-color: fade(#1890ff, 8);
100
+ background-color: rgba(237, 246, 255, 1);
101
+ }
102
+ .ant-table-tbody > tr {
103
+ // &:nth-child(even) when(@theme=default) {
104
+ // background: #f6f6f6;
105
+ // }
106
+
107
+ &.ant-table-placeholder {
108
+ position: absolute;
109
+ top: 25%;
110
+ // top: auto;
111
+ right: 0;
112
+ // bottom: auto;
113
+ left: 0;
114
+ background-color: transparent;
115
+ border-top: none;
116
+ // height: 100%;
117
+ & > td.ant-table-cell {
118
+ display: flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+ width: 100%;
122
+ height: 100%;
123
+ // border-right: @border-width-base @border-style-base @table-border-color;
124
+ // border-left: @border-width-base @border-style-base @table-border-color;
125
+ border: none;
126
+ }
127
+ }
128
+ }
129
+ // fix: checkbox 选中时 固定列 最上面一层透明会 和下面重叠
130
+ // .ant-table-tbody > tr.ant-table-row-selected td {
131
+ // background: transparent;
132
+ // }
133
+ &-alert {
134
+ margin-bottom: 8px;
135
+ &-message when(@theme=default) {
136
+ color: fade(@black, 65%);
137
+ }
138
+ &-message when(@theme=dark) {
139
+ color: @text-color;
140
+ }
141
+ &-info-content > strong {
142
+ margin: 0 4px;
143
+ color: #13c2c2;
144
+ }
145
+ &-info-option {
146
+ margin-left: 10px;
147
+ }
148
+ }
149
+ &-nodata {
150
+ .ant-table-scroll {
151
+ overflow-y: hidden;
152
+ }
153
+ }
154
+ &-toolbar {
155
+ display: table;
156
+ width: 100%;
157
+ margin: 16px 0;
158
+ color: @text-color;
159
+ }
160
+ &-toolbar-left,
161
+ &-toolbar-right {
162
+ display: inline-block;
163
+ display: table-cell;
164
+ vertical-align: middle;
165
+ }
166
+ &-toolbar-left {
167
+ color: @text-color;
168
+ font-size: 16px;
169
+ }
170
+ &-toolbar-right {
171
+ float: right;
172
+ }
173
+ &-toolbar-setting-item {
174
+ display: inline-block;
175
+ margin-left: 16px;
176
+ color: @icon-color;
177
+ font-size: 16px;
178
+ vertical-align: middle;
179
+ cursor: pointer;
180
+ &:hover {
181
+ color: @icon-color-hover;
182
+ }
183
+ }
184
+ &-column-setting-title {
185
+ height: 32px;
186
+ line-height: 32px;
187
+ a {
188
+ display: inline-block;
189
+ float: right;
190
+ vertical-align: middle;
191
+ }
192
+ }
193
+ &-column-setting-checkbox-wrapper {
194
+ color: @text-color;
195
+ vertical-align: middle;
196
+ }
197
+ &-space-item {
198
+ display: inline-block;
199
+ vertical-align: middle;
200
+ }
201
+ .react-resizable {
202
+ position: relative;
203
+ background-clip: padding-box;
204
+ }
205
+ .react-resizable-handle {
206
+ position: absolute;
207
+ right: -5px;
208
+ bottom: 0;
209
+ z-index: 1;
210
+ width: 10px;
211
+ height: 100%;
212
+ cursor: col-resize;
213
+ }
214
+ }
package/lib/vtx-export/index.js CHANGED
@@ -49,7 +49,9 @@ var VtxExport = function VtxExport(props) {
49
49
  pageButton = _props$pageButton === void 0 ? true : _props$pageButton,
50
50
  _props$allButton = props.allButton,
51
51
  allButton = _props$allButton === void 0 ? true : _props$allButton,
52
- downloadURL = props.downloadURL;
52
+ downloadURL = props.downloadURL,
53
+ _props$timeout = props.timeout,
54
+ timeout = _props$timeout === void 0 ? SECOND : _props$timeout;
53
55
  var getExportParams = props.getExportParams,
54
56
  afterExport = props.afterExport;
55
57
  /* 菜单点击 */
@@ -79,7 +81,7 @@ var VtxExport = function VtxExport(props) {
79
81
  var params = {
80
82
  url: downloadURL,
81
83
  method: 'post',
82
- timeout: SECOND * MILL_SECOND,
84
+ timeout: timeout * MILL_SECOND,
83
85
  responseType: 'blob',
84
86
  headers: {
85
87
  'Content-Type': 'application/x-www-form-urlencoded',
@@ -191,7 +193,8 @@ VtxExport.propTypes = {
191
193
  allButton: _propTypes["default"].bool,
192
194
  downloadURL: _propTypes["default"].string,
193
195
  getExportParams: _propTypes["default"].func,
194
- afterExport: _propTypes["default"].func
196
+ afterExport: _propTypes["default"].func,
197
+ timeout: _propTypes["default"].number
195
198
  };
196
199
  var _default = VtxExport;
197
200
  exports["default"] = _default;
package/lib/vtx-export/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["getUrlParam","token","SECOND","MILL_SECOND","VtxExport","props","exportText","rowButton","pageButton","allButton","downloadURL","getExportParams","afterExport","exportButtonClick","param","passVal","key","downLoadFile","requestToResponse","postData","params","url","method","timeout","responseType","headers","Authorization","data","qs","stringify","Promise","resolve","reject","axios","then","res","err","div","document","createElement","ReactDOM","render","body","appendChild","status","contentDisposition","filename","indexOf","decodeURI","split","replace","download","message","warn","removeChild","content","blob","Blob","window","navigator","msSaveOrOpenBlob","downloadByATag","URL","createObjectURL","href","a","style","display","click","remove","revokeObjectURL","exportMenu","propTypes","PropTypes","string","bool","func"],"sources":["vtx-export/index.jsx"],"sourcesContent":["import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport axios from 'axios';\r\nimport qs from 'querystring';\r\nimport Button from 'antd/lib/button';\r\nimport Menu from 'antd/lib/menu';\r\nimport Dropdown from 'antd/lib/dropdown';\r\nimport message from 'antd/lib/message';\r\nimport Spin from 'antd/lib/spin';\r\nimport getUrlParam from '@vtx/utils/lib/getUrlParam';\r\nimport DownOutlined from '@ant-design/icons/DownOutlined';\r\nimport ExportOutlined from '@ant-design/icons/ExportOutlined';\r\n\r\nconst { token } = getUrlParam();\r\n// 默认10秒超时\r\nconst SECOND = 10;\r\nconst MILL_SECOND = 1000;\r\n\r\nconst VtxExport = props => {\r\n const {\r\n exportText = '导出',\r\n rowButton = true,\r\n pageButton = true,\r\n allButton = true,\r\n downloadURL,\r\n } = props;\r\n\r\n const { getExportParams, afterExport } = props;\r\n\r\n /* 菜单点击 */\r\n function exportButtonClick(param) {\r\n const passVal = typeof getExportParams == 'function' ? getExportParams(param.key) : null;\r\n if (!downloadURL) {\r\n return;\r\n }\r\n if (!passVal) {\r\n return;\r\n }\r\n downLoadFile(passVal);\r\n }\r\n\r\n // eslint-disable-next-line valid-jsdoc\r\n /**\r\n * 发送http请求\r\n * @param {Object} postData api参数\r\n * @return reponse\r\n */\r\n function requestToResponse(postData) {\r\n const params = {\r\n url: downloadURL,\r\n method: 'post',\r\n timeout: SECOND * MILL_SECOND,\r\n responseType: 'blob',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n Authorization: token ? `Bearer ${token}` : '',\r\n },\r\n data: qs.stringify(postData),\r\n };\r\n return new Promise((resolve, reject) => {\r\n axios(params)\r\n .then(res => {\r\n resolve(res);\r\n })\r\n .catch(err => {\r\n reject(err);\r\n });\r\n });\r\n }\r\n\r\n /* 下载文件 */\r\n function downLoadFile(postData) {\r\n const div = document.createElement('div');\r\n ReactDOM.render(<Spin spinning className=\"vtx-spin\" />, div);\r\n document.body.appendChild(div);\r\n\r\n requestToResponse(postData).then(res => {\r\n let status = false;\r\n // 文件存在\r\n if (res.headers['content-disposition']) {\r\n const contentDisposition = res.headers['content-disposition'];\r\n let filename;\r\n if (contentDisposition.indexOf('filename*=') > -1) {\r\n filename = decodeURI(\r\n contentDisposition.split('filename*=')[1].replace(\"utf-8'zh_cn'\", ''),\r\n );\r\n } else {\r\n filename = decodeURI(contentDisposition.split('filename=')[1]);\r\n }\r\n if ('download' in document.createElement('a')) {\r\n download(res.data, filename);\r\n status = true;\r\n } else {\r\n message.warn('浏览器不支持');\r\n }\r\n }\r\n // 关闭loading，执行回调\r\n document.body.removeChild(div);\r\n if (afterExport && typeof afterExport === 'function') {\r\n afterExport(status);\r\n }\r\n });\r\n }\r\n\r\n /* 下载并 兼容IE */\r\n function download(content, filename) {\r\n const blob = new Blob([content]);\r\n // IE\r\n if (window.navigator && window.navigator.msSaveOrOpenBlob) {\r\n window.navigator.msSaveOrOpenBlob(blob, filename);\r\n } else {\r\n downloadByATag(window.URL.createObjectURL(blob), filename);\r\n }\r\n }\r\n\r\n /**\r\n * 通过a标签模拟下载\r\n * @param {String} href\r\n * @param {String} filename\r\n */\r\n function downloadByATag(href, filename) {\r\n const a = document.createElement('a');\r\n a.download = filename;\r\n a.style.display = 'none';\r\n a.href = href;\r\n document.body.appendChild(a);\r\n a.click();\r\n a.remove();\r\n window.URL.revokeObjectURL(href);\r\n }\r\n\r\n const exportMenu = (\r\n <Menu onClick={exportButtonClick}>\r\n {rowButton === false ? null : <Menu.Item key=\"rows\">导出选中行</Menu.Item>}\r\n {pageButton === false ? null : <Menu.Item key=\"page\">导出当前页</Menu.Item>}\r\n {allButton === false ? null : <Menu.Item key=\"all\">导出全部</Menu.Item>}\r\n </Menu>\r\n );\r\n return (\r\n <Dropdown overlay={exportMenu} trigger={['click']}>\r\n <Button icon={<ExportOutlined />}>\r\n {exportText} <DownOutlined />\r\n </Button>\r\n </Dropdown>\r\n );\r\n};\r\n\r\nVtxExport.propTypes = {\r\n exportText: PropTypes.string,\r\n rowButton: PropTypes.bool,\r\n pageButton: PropTypes.bool,\r\n allButton: PropTypes.bool,\r\n downloadURL: PropTypes.string,\r\n getExportParams: PropTypes.func,\r\n afterExport: PropTypes.func,\r\n};\r\nexport default VtxExport;\r\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,mBAAkB,IAAAA,wBAAA,GAAlB;AAAA,IAAQC,KAAR,gBAAQA,KAAR,C,CACA;;;AACA,IAAMC,MAAM,GAAG,EAAf;AACA,IAAMC,WAAW,GAAG,IAApB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,KAAK,EAAI;EACvB,wBAMIA,KANJ,CACIC,UADJ;EAAA,IACIA,UADJ,kCACiB,IADjB;EAAA,uBAMID,KANJ,CAEIE,SAFJ;EAAA,IAEIA,SAFJ,iCAEgB,IAFhB;EAAA,wBAMIF,KANJ,CAGIG,UAHJ;EAAA,IAGIA,UAHJ,kCAGiB,IAHjB;EAAA,uBAMIH,KANJ,CAIII,SAJJ;EAAA,IAIIA,SAJJ,iCAIgB,IAJhB;EAAA,IAKIC,WALJ,GAMIL,KANJ,CAKIK,WALJ;EAQA,IAAQC,eAAR,GAAyCN,KAAzC,CAAQM,eAAR;EAAA,IAAyBC,WAAzB,GAAyCP,KAAzC,CAAyBO,WAAzB;EAEA;;EACA,SAASC,iBAAT,CAA2BC,KAA3B,EAAkC;IAC9B,IAAMC,OAAO,GAAG,OAAOJ,eAAP,IAA0B,UAA1B,GAAuCA,eAAe,CAACG,KAAK,CAACE,GAAP,CAAtD,GAAoE,IAApF;;IACA,IAAI,CAACN,WAAL,EAAkB;MACd;IACH;;IACD,IAAI,CAACK,OAAL,EAAc;MACV;IACH;;IACDE,YAAY,CAACF,OAAD,CAAZ;EACH,CArBsB,CAuBvB;;EACA;AACJ;AACA;AACA;AACA;;;EACI,SAASG,iBAAT,CAA2BC,QAA3B,EAAqC;IACjC,IAAMC,MAAM,GAAG;MACXC,GAAG,EAAEX,WADM;MAEXY,MAAM,EAAE,MAFG;MAGXC,OAAO,EAAErB,MAAM,GAAGC,WAHP;MAIXqB,YAAY,EAAE,MAJH;MAKXC,OAAO,EAAE;QACL,gBAAgB,mCADX;QAELC,aAAa,EAAEzB,KAAK,oBAAaA,KAAb,IAAuB;MAFtC,CALE;MASX0B,IAAI,EAAEC,uBAAA,CAAGC,SAAH,CAAaV,QAAb;IATK,CAAf;IAWA,OAAO,IAAIW,OAAJ,CAAY,UAACC,OAAD,EAAUC,MAAV,EAAqB;MACpC,IAAAC,iBAAA,EAAMb,MAAN,EACKc,IADL,CACU,UAAAC,GAAG,EAAI;QACTJ,OAAO,CAACI,GAAD,CAAP;MACH,CAHL,WAIW,UAAAC,GAAG,EAAI;QACVJ,MAAM,CAACI,GAAD,CAAN;MACH,CANL;IAOH,CARM,CAAP;EASH;EAED;;;EACA,SAASnB,YAAT,CAAsBE,QAAtB,EAAgC;IAC5B,IAAMkB,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAZ;;IACAC,oBAAA,CAASC,MAAT,eAAgB,gCAAC,gBAAD;MAAM,QAAQ,MAAd;MAAe,SAAS,EAAC;IAAzB,EAAhB,EAAwDJ,GAAxD;;IACAC,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BN,GAA1B;IAEAnB,iBAAiB,CAACC,QAAD,CAAjB,CAA4Be,IAA5B,CAAiC,UAAAC,GAAG,EAAI;MACpC,IAAIS,MAAM,GAAG,KAAb,CADoC,CAEpC;;MACA,IAAIT,GAAG,CAACV,OAAJ,CAAY,qBAAZ,CAAJ,EAAwC;QACpC,IAAMoB,kBAAkB,GAAGV,GAAG,CAACV,OAAJ,CAAY,qBAAZ,CAA3B;QACA,IAAIqB,QAAJ;;QACA,IAAID,kBAAkB,CAACE,OAAnB,CAA2B,YAA3B,IAA2C,CAAC,CAAhD,EAAmD;UAC/CD,QAAQ,GAAGE,SAAS,CAChBH,kBAAkB,CAACI,KAAnB,CAAyB,YAAzB,EAAuC,CAAvC,EAA0CC,OAA1C,CAAkD,cAAlD,EAAkE,EAAlE,CADgB,CAApB;QAGH,CAJD,MAIO;UACHJ,QAAQ,GAAGE,SAAS,CAACH,kBAAkB,CAACI,KAAnB,CAAyB,WAAzB,EAAsC,CAAtC,CAAD,CAApB;QACH;;QACD,IAAI,cAAcX,QAAQ,CAACC,aAAT,CAAuB,GAAvB,CAAlB,EAA+C;UAC3CY,QAAQ,CAAChB,GAAG,CAACR,IAAL,EAAWmB,QAAX,CAAR;UACAF,MAAM,GAAG,IAAT;QACH,CAHD,MAGO;UACHQ,mBAAA,CAAQC,IAAR,CAAa,QAAb;QACH;MACJ,CAnBmC,CAoBpC;;;MACAf,QAAQ,CAACI,IAAT,CAAcY,WAAd,CAA0BjB,GAA1B;;MACA,IAAIzB,WAAW,IAAI,OAAOA,WAAP,KAAuB,UAA1C,EAAsD;QAClDA,WAAW,CAACgC,MAAD,CAAX;MACH;IACJ,CAzBD;EA0BH;EAED;;;EACA,SAASO,QAAT,CAAkBI,OAAlB,EAA2BT,QAA3B,EAAqC;IACjC,IAAMU,IAAI,GAAG,IAAIC,IAAJ,CAAS,CAACF,OAAD,CAAT,CAAb,CADiC,CAEjC;;IACA,IAAIG,MAAM,CAACC,SAAP,IAAoBD,MAAM,CAACC,SAAP,CAAiBC,gBAAzC,EAA2D;MACvDF,MAAM,CAACC,SAAP,CAAiBC,gBAAjB,CAAkCJ,IAAlC,EAAwCV,QAAxC;IACH,CAFD,MAEO;MACHe,cAAc,CAACH,MAAM,CAACI,GAAP,CAAWC,eAAX,CAA2BP,IAA3B,CAAD,EAAmCV,QAAnC,CAAd;IACH;EACJ;EAED;AACJ;AACA;AACA;AACA;;;EACI,SAASe,cAAT,CAAwBG,IAAxB,EAA8BlB,QAA9B,EAAwC;IACpC,IAAMmB,CAAC,GAAG3B,QAAQ,CAACC,aAAT,CAAuB,GAAvB,CAAV;IACA0B,CAAC,CAACd,QAAF,GAAaL,QAAb;IACAmB,CAAC,CAACC,KAAF,CAAQC,OAAR,GAAkB,MAAlB;IACAF,CAAC,CAACD,IAAF,GAASA,IAAT;IACA1B,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BsB,CAA1B;IACAA,CAAC,CAACG,KAAF;IACAH,CAAC,CAACI,MAAF;IACAX,MAAM,CAACI,GAAP,CAAWQ,eAAX,CAA2BN,IAA3B;EACH;;EAED,IAAMO,UAAU,gBACZ,gCAAC,gBAAD;IAAM,OAAO,EAAE1D;EAAf,GACKN,SAAS,KAAK,KAAd,GAAsB,IAAtB,gBAA6B,gCAAC,gBAAD,CAAM,IAAN;IAAW,GAAG,EAAC;EAAf,oCADlC,EAEKC,UAAU,KAAK,KAAf,GAAuB,IAAvB,gBAA8B,gCAAC,gBAAD,CAAM,IAAN;IAAW,GAAG,EAAC;EAAf,oCAFnC,EAGKC,SAAS,KAAK,KAAd,GAAsB,IAAtB,gBAA6B,gCAAC,gBAAD,CAAM,IAAN;IAAW,GAAG,EAAC;EAAf,8BAHlC,CADJ;;EAOA,oBACI,gCAAC,oBAAD;IAAU,OAAO,EAAE8D,UAAnB;IAA+B,OAAO,EAAE,CAAC,OAAD;EAAxC,gBACI,gCAAC,kBAAD;IAAQ,IAAI,eAAE,gCAAC,0BAAD;EAAd,GACKjE,UADL,oBACiB,gCAAC,wBAAD,OADjB,CADJ,CADJ;AAOH,CA/HD;;AAiIAF,SAAS,CAACoE,SAAV,GAAsB;EAClBlE,UAAU,EAAEmE,qBAAA,CAAUC,MADJ;EAElBnE,SAAS,EAAEkE,qBAAA,CAAUE,IAFH;EAGlBnE,UAAU,EAAEiE,qBAAA,CAAUE,IAHJ;EAIlBlE,SAAS,EAAEgE,qBAAA,CAAUE,IAJH;EAKlBjE,WAAW,EAAE+D,qBAAA,CAAUC,MALL;EAMlB/D,eAAe,EAAE8D,qBAAA,CAAUG,IANT;EAOlBhE,WAAW,EAAE6D,qBAAA,CAAUG;AAPL,CAAtB;eASexE,S"}
1
+ {"version":3,"file":"index.js","names":["getUrlParam","token","SECOND","MILL_SECOND","VtxExport","props","exportText","rowButton","pageButton","allButton","downloadURL","timeout","getExportParams","afterExport","exportButtonClick","param","passVal","key","downLoadFile","requestToResponse","postData","params","url","method","responseType","headers","Authorization","data","qs","stringify","Promise","resolve","reject","axios","then","res","err","div","document","createElement","ReactDOM","render","body","appendChild","status","contentDisposition","filename","indexOf","decodeURI","split","replace","download","message","warn","removeChild","content","blob","Blob","window","navigator","msSaveOrOpenBlob","downloadByATag","URL","createObjectURL","href","a","style","display","click","remove","revokeObjectURL","exportMenu","propTypes","PropTypes","string","bool","func","number"],"sources":["vtx-export/index.jsx"],"sourcesContent":["import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport PropTypes from 'prop-types';\r\nimport axios from 'axios';\r\nimport qs from 'querystring';\r\nimport Button from 'antd/lib/button';\r\nimport Menu from 'antd/lib/menu';\r\nimport Dropdown from 'antd/lib/dropdown';\r\nimport message from 'antd/lib/message';\r\nimport Spin from 'antd/lib/spin';\r\nimport getUrlParam from '@vtx/utils/lib/getUrlParam';\r\nimport DownOutlined from '@ant-design/icons/DownOutlined';\r\nimport ExportOutlined from '@ant-design/icons/ExportOutlined';\r\n\r\nconst { token } = getUrlParam();\r\n// 默认10秒超时\r\nconst SECOND = 10;\r\nconst MILL_SECOND = 1000;\r\n\r\nconst VtxExport = props => {\r\n const {\r\n exportText = '导出',\r\n rowButton = true,\r\n pageButton = true,\r\n allButton = true,\r\n downloadURL,\r\n timeout = SECOND\r\n } = props;\r\n\r\n const { getExportParams, afterExport } = props;\r\n\r\n /* 菜单点击 */\r\n function exportButtonClick(param) {\r\n const passVal = typeof getExportParams == 'function' ? getExportParams(param.key) : null;\r\n if (!downloadURL) {\r\n return;\r\n }\r\n if (!passVal) {\r\n return;\r\n }\r\n downLoadFile(passVal);\r\n }\r\n\r\n // eslint-disable-next-line valid-jsdoc\r\n /**\r\n * 发送http请求\r\n * @param {Object} postData api参数\r\n * @return reponse\r\n */\r\n function requestToResponse(postData) {\r\n const params = {\r\n url: downloadURL,\r\n method: 'post',\r\n timeout: timeout * MILL_SECOND,\r\n responseType: 'blob',\r\n headers: {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n Authorization: token ? `Bearer ${token}` : '',\r\n },\r\n data: qs.stringify(postData),\r\n };\r\n return new Promise((resolve, reject) => {\r\n axios(params)\r\n .then(res => {\r\n resolve(res);\r\n })\r\n .catch(err => {\r\n reject(err);\r\n });\r\n });\r\n }\r\n\r\n /* 下载文件 */\r\n function downLoadFile(postData) {\r\n const div = document.createElement('div');\r\n ReactDOM.render(<Spin spinning className=\"vtx-spin\" />, div);\r\n document.body.appendChild(div);\r\n\r\n requestToResponse(postData).then(res => {\r\n let status = false;\r\n // 文件存在\r\n if (res.headers['content-disposition']) {\r\n const contentDisposition = res.headers['content-disposition'];\r\n let filename;\r\n if (contentDisposition.indexOf('filename*=') > -1) {\r\n filename = decodeURI(\r\n contentDisposition.split('filename*=')[1].replace(\"utf-8'zh_cn'\", ''),\r\n );\r\n } else {\r\n filename = decodeURI(contentDisposition.split('filename=')[1]);\r\n }\r\n if ('download' in document.createElement('a')) {\r\n download(res.data, filename);\r\n status = true;\r\n } else {\r\n message.warn('浏览器不支持');\r\n }\r\n }\r\n // 关闭loading，执行回调\r\n document.body.removeChild(div);\r\n if (afterExport && typeof afterExport === 'function') {\r\n afterExport(status);\r\n }\r\n });\r\n }\r\n\r\n /* 下载并 兼容IE */\r\n function download(content, filename) {\r\n const blob = new Blob([content]);\r\n // IE\r\n if (window.navigator && window.navigator.msSaveOrOpenBlob) {\r\n window.navigator.msSaveOrOpenBlob(blob, filename);\r\n } else {\r\n downloadByATag(window.URL.createObjectURL(blob), filename);\r\n }\r\n }\r\n\r\n /**\r\n * 通过a标签模拟下载\r\n * @param {String} href\r\n * @param {String} filename\r\n */\r\n function downloadByATag(href, filename) {\r\n const a = document.createElement('a');\r\n a.download = filename;\r\n a.style.display = 'none';\r\n a.href = href;\r\n document.body.appendChild(a);\r\n a.click();\r\n a.remove();\r\n window.URL.revokeObjectURL(href);\r\n }\r\n\r\n const exportMenu = (\r\n <Menu onClick={exportButtonClick}>\r\n {rowButton === false ? null : <Menu.Item key=\"rows\">导出选中行</Menu.Item>}\r\n {pageButton === false ? null : <Menu.Item key=\"page\">导出当前页</Menu.Item>}\r\n {allButton === false ? null : <Menu.Item key=\"all\">导出全部</Menu.Item>}\r\n </Menu>\r\n );\r\n return (\r\n <Dropdown overlay={exportMenu} trigger={['click']}>\r\n <Button icon={<ExportOutlined />}>\r\n {exportText} <DownOutlined />\r\n </Button>\r\n </Dropdown>\r\n );\r\n};\r\n\r\nVtxExport.propTypes = {\r\n exportText: PropTypes.string,\r\n rowButton: PropTypes.bool,\r\n pageButton: PropTypes.bool,\r\n allButton: PropTypes.bool,\r\n downloadURL: PropTypes.string,\r\n getExportParams: PropTypes.func,\r\n afterExport: PropTypes.func,\r\n timeout: PropTypes.number\r\n};\r\nexport default VtxExport;\r\n"],"mappings":"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"}
package/lib/vtx-form-layout/style/index.less CHANGED
@@ -1,215 +1,215 @@
1
- @import (reference) '~antd/lib/style/themes/index.less';
2
-
3
- @view-item-margin-bottom: 16px;
4
-
5
- .vtx-form-layout {
6
- position: relative;
7
- display: flex;
8
- flex-flow: row wrap;
9
- width: 100%;
10
- padding: 0 @padding-lg;
11
- overflow: hidden;
12
- .vtx-form-item {
13
- .ant-form-item-label {
14
- text-overflow: ellipsis;
15
- label::after {
16
- content: '';
17
- }
18
- }
19
- &-vertical {
20
- flex-direction: column;
21
- .ant-form-item-row {
22
- flex-direction: column;
23
- margin-bottom: 20px;
24
- }
25
- .ant-form-item-label,
26
- .ant-form-item-control {
27
- line-height: @line-height-base;
28
- }
29
- .ant-form-item-label {
30
- margin-bottom: 8px;
31
- padding: 0 !important;
32
- white-space: initial;
33
- text-align: left;
34
- label {
35
- height: auto;
36
- }
37
- }
38
- }
39
- .ant-form-item-explain {
40
- font-size: @font-size-sm;
41
- }
42
- &--inline {
43
- flex: none;
44
- flex-direction: row;
45
- flex-wrap: nowrap;
46
- margin-right: 16px;
47
- margin-bottom: @view-item-margin-bottom !important;
48
- row-gap: 0;
49
- .ant-form-item-control-input {
50
- min-height: auto;
51
- }
52
- .ant-form-item-label {
53
- flex: none;
54
- margin-bottom: 0;
55
- & > label {
56
- height: auto;
57
- color: @text-color;
58
- }
59
- label::after {
60
- content: ':';
61
- }
62
- }
63
- }
64
- &--view {
65
- .ant-form-item-label,
66
- .ant-form-item-control {
67
- line-height: @line-height-base;
68
- }
69
- .ant-form-item-label {
70
- & > label {
71
- height: auto;
72
- color: @text-color;
73
- }
74
- label::after {
75
- content: ':';
76
- }
77
- }
78
- .ant-form-item-control {
79
- color: @text-color;
80
- .ant-form-item-control-input {
81
- min-height: auto;
82
- }
83
- }
84
- }
85
- }
86
- .vtx-form-item-col {
87
- .ant-form-item {
88
- margin-bottom: 20px;
89
- }
90
- .vtx-form-item--view {
91
- margin-bottom: 0;
92
- }
93
- .ant-form-item-with-help {
94
- margin-bottom: 0;
95
- }
96
- .ant-form-item-explain {
97
- min-height: 20px;
98
- }
99
- }
100
- .vtx-form-card {
101
- position: relative;
102
- width: 100%;
103
- overflow: hidden;
104
- &-expand-icon {
105
- color: fade(@text-color, 75%);
106
- transition: transform 0.24s, -webkit-transform 0.24s;
107
- }
108
- .ant-card-body {
109
- padding: 0;
110
- }
111
- .ant-card-head-wrapper,
112
- .ant-card-head-title {
113
- line-height: 1;
114
- }
115
- &-content {
116
- display: flex;
117
- flex-flow: row wrap;
118
- padding: 20px 24px;
119
- padding-bottom: 0;
120
- &::after {
121
- clear: both;
122
- }
123
- &::before,
124
- &::after {
125
- display: table;
126
- content: '';
127
- }
128
- }
129
- &-content-hide {
130
- display: none;
131
- }
132
- }
133
- .vtx-form-card + .vtx-form-card {
134
- margin-top: 20px;
135
- }
136
- .vtx-form-pane {
137
- position: relative;
138
- box-sizing: border-box;
139
- width: 100%;
140
- &::after {
141
- clear: both;
142
- }
143
- &::before,
144
- &::after {
145
- display: table;
146
- content: '';
147
- }
148
- &-title {
149
- margin-bottom: 16px;
150
- overflow: hidden;
151
- color: @text-color;
152
- font-weight: 500;
153
- line-height: @line-height-base;
154
- list-style: none;
155
- }
156
- &-content {
157
- display: flex;
158
- flex-flow: row wrap;
159
- &::after {
160
- clear: both;
161
- }
162
- &::before,
163
- &::after {
164
- display: table;
165
- content: '';
166
- }
167
- }
168
- }
169
- .vtx-form-divider {
170
- margin: 0;
171
- margin-bottom: 20px;
172
- &--small {
173
- margin-bottom: 16px;
174
- }
175
- }
176
- .vtx-form-tabs {
177
- width: 100%;
178
- .ant-tabs-bar {
179
- padding-right: @padding-sm;
180
- padding-left: @padding-sm;
181
- border-bottom: none;
182
- }
183
- .ant-tabs-tab {
184
- padding: 5px 0 10px 0;
185
- }
186
- }
187
- &-vertical {
188
- padding: 0 @padding-sm;
189
- .vtx-form-item-col {
190
- padding-right: @padding-sm;
191
- padding-left: @padding-sm;
192
- }
193
- .vtx-form-card-content {
194
- padding: 20px @padding-sm;
195
- padding-bottom: 0;
196
- }
197
- .vtx-form-pane-title {
198
- padding: 0 @padding-sm;
199
- }
200
- }
201
- &-has-card {
202
- padding: 0;
203
- .vtx-form-tabs .ant-tabs-bar {
204
- padding: 0 @padding-lg;
205
- }
206
- }
207
- &-view {
208
- .vtx-form-item-col {
209
- margin-bottom: @view-item-margin-bottom;
210
- }
211
- .vtx-form-divider {
212
- margin-bottom: @view-item-margin-bottom;
213
- }
214
- }
215
- }
1
+ @import (reference) '~antd/lib/style/themes/index.less';
2
+
3
+ @view-item-margin-bottom: 16px;
4
+
5
+ .vtx-form-layout {
6
+ position: relative;
7
+ display: flex;
8
+ flex-flow: row wrap;
9
+ width: 100%;
10
+ padding: 0 @padding-lg;
11
+ overflow: hidden;
12
+ .vtx-form-item {
13
+ .ant-form-item-label {
14
+ text-overflow: ellipsis;
15
+ label::after {
16
+ content: '';
17
+ }
18
+ }
19
+ &-vertical {
20
+ flex-direction: column;
21
+ .ant-form-item-row {
22
+ flex-direction: column;
23
+ margin-bottom: 20px;
24
+ }
25
+ .ant-form-item-label,
26
+ .ant-form-item-control {
27
+ line-height: @line-height-base;
28
+ }
29
+ .ant-form-item-label {
30
+ margin-bottom: 8px;
31
+ padding: 0 !important;
32
+ white-space: initial;
33
+ text-align: left;
34
+ label {
35
+ height: auto;
36
+ }
37
+ }
38
+ }
39
+ .ant-form-item-explain {
40
+ font-size: @font-size-sm;
41
+ }
42
+ &--inline {
43
+ flex: none;
44
+ flex-direction: row;
45
+ flex-wrap: nowrap;
46
+ margin-right: 16px;
47
+ margin-bottom: @view-item-margin-bottom !important;
48
+ row-gap: 0;
49
+ .ant-form-item-control-input {
50
+ min-height: auto;
51
+ }
52
+ .ant-form-item-label {
53
+ flex: none;
54
+ margin-bottom: 0;
55
+ & > label {
56
+ height: auto;
57
+ color: @text-color;
58
+ }
59
+ label::after {
60
+ content: ':';
61
+ }
62
+ }
63
+ }
64
+ &--view {
65
+ .ant-form-item-label,
66
+ .ant-form-item-control {
67
+ line-height: @line-height-base;
68
+ }
69
+ .ant-form-item-label {
70
+ & > label {
71
+ height: auto;
72
+ color: @text-color;
73
+ }
74
+ label::after {
75
+ content: ':';
76
+ }
77
+ }
78
+ .ant-form-item-control {
79
+ color: @text-color;
80
+ .ant-form-item-control-input {
81
+ min-height: auto;
82
+ }
83
+ }
84
+ }
85
+ }
86
+ .vtx-form-item-col {
87
+ .ant-form-item {
88
+ margin-bottom: 20px;
89
+ }
90
+ .vtx-form-item--view {
91
+ margin-bottom: 0;
92
+ }
93
+ .ant-form-item-with-help {
94
+ margin-bottom: 0;
95
+ }
96
+ .ant-form-item-explain {
97
+ min-height: 20px;
98
+ }
99
+ }
100
+ .vtx-form-card {
101
+ position: relative;
102
+ width: 100%;
103
+ overflow: hidden;
104
+ &-expand-icon {
105
+ color: fade(@text-color, 75%);
106
+ transition: transform 0.24s, -webkit-transform 0.24s;
107
+ }
108
+ .ant-card-body {
109
+ padding: 0;
110
+ }
111
+ .ant-card-head-wrapper,
112
+ .ant-card-head-title {
113
+ line-height: 1;
114
+ }
115
+ &-content {
116
+ display: flex;
117
+ flex-flow: row wrap;
118
+ padding: 20px 24px;
119
+ padding-bottom: 0;
120
+ &::after {
121
+ clear: both;
122
+ }
123
+ &::before,
124
+ &::after {
125
+ display: table;
126
+ content: '';
127
+ }
128
+ }
129
+ &-content-hide {
130
+ display: none;
131
+ }
132
+ }
133
+ .vtx-form-card + .vtx-form-card {
134
+ margin-top: 20px;
135
+ }
136
+ .vtx-form-pane {
137
+ position: relative;
138
+ box-sizing: border-box;
139
+ width: 100%;
140
+ &::after {
141
+ clear: both;
142
+ }
143
+ &::before,
144
+ &::after {
145
+ display: table;
146
+ content: '';
147
+ }
148
+ &-title {
149
+ margin-bottom: 16px;
150
+ overflow: hidden;
151
+ color: @text-color;
152
+ font-weight: 500;
153
+ line-height: @line-height-base;
154
+ list-style: none;
155
+ }
156
+ &-content {
157
+ display: flex;
158
+ flex-flow: row wrap;
159
+ &::after {
160
+ clear: both;
161
+ }
162
+ &::before,
163
+ &::after {
164
+ display: table;
165
+ content: '';
166
+ }
167
+ }
168
+ }
169
+ .vtx-form-divider {
170
+ margin: 0;
171
+ margin-bottom: 20px;
172
+ &--small {
173
+ margin-bottom: 16px;
174
+ }
175
+ }
176
+ .vtx-form-tabs {
177
+ width: 100%;
178
+ .ant-tabs-bar {
179
+ padding-right: @padding-sm;
180
+ padding-left: @padding-sm;
181
+ border-bottom: none;
182
+ }
183
+ .ant-tabs-tab {
184
+ padding: 5px 0 10px 0;
185
+ }
186
+ }
187
+ &-vertical {
188
+ padding: 0 @padding-sm;
189
+ .vtx-form-item-col {
190
+ padding-right: @padding-sm;
191
+ padding-left: @padding-sm;
192
+ }
193
+ .vtx-form-card-content {
194
+ padding: 20px @padding-sm;
195
+ padding-bottom: 0;
196
+ }
197
+ .vtx-form-pane-title {
198
+ padding: 0 @padding-sm;
199
+ }
200
+ }
201
+ &-has-card {
202
+ padding: 0;
203
+ .vtx-form-tabs .ant-tabs-bar {
204
+ padding: 0 @padding-lg;
205
+ }
206
+ }
207
+ &-view {
208
+ .vtx-form-item-col {
209
+ margin-bottom: @view-item-margin-bottom;
210
+ }
211
+ .vtx-form-divider {
212
+ margin-bottom: @view-item-margin-bottom;
213
+ }
214
+ }
215
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtx/components",
3
- "version": "3.1.14",
3
+ "version": "3.1.16",
4
4
  "description": "React components for Vortex",
5
5
  "keywords": [
6
6
  "react",