@vtx/components 3.1.13 → 3.1.15

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 (7) hide show
  1. package/lib/vtx-datagrid/style/index.css +2 -4
  2. package/lib/vtx-datagrid/style/index.less +214 -212
  3. package/lib/vtx-export/index.js +4 -2
  4. package/lib/vtx-export/index.js.map +1 -1
  5. package/lib/vtx-form-layout/style/index.css +7 -0
  6. package/lib/vtx-form-layout/style/index.less +215 -213
  7. package/package.json +1 -1
package/lib/vtx-datagrid/style/index.css CHANGED
@@ -67,9 +67,8 @@
67
67
  }
68
68
  .vtx-datagrid .ant-table-tbody > tr.ant-table-placeholder {
69
69
  position: absolute;
70
- top: auto;
70
+ top: 25%;
71
71
  right: 0;
72
- bottom: auto;
73
72
  left: 0;
74
73
  background-color: transparent;
75
74
  border-top: none;
@@ -86,8 +85,7 @@
86
85
  justify-content: center;
87
86
  width: 100%;
88
87
  height: 100%;
89
- border-right: 1px solid #f0f0f0;
90
- border-left: 1px solid #f0f0f0;
88
+ border: none;
91
89
  }
92
90
  .vtx-datagrid-alert {
93
91
  margin-bottom: 8px;
package/lib/vtx-datagrid/style/index.less CHANGED
@@ -1,212 +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
- background-color: transparent;
114
- border-top: none;
115
- // height: 100%;
116
- & > td.ant-table-cell {
117
- display: flex;
118
- align-items: center;
119
- justify-content: center;
120
- width: 100%;
121
- height: 100%;
122
- border-right: @border-width-base @border-style-base @table-border-color;
123
- border-left: @border-width-base @border-style-base @table-border-color;
124
- }
125
- }
126
- }
127
- // fix: checkbox 选中时 固定列 最上面一层透明会 和下面重叠
128
- // .ant-table-tbody > tr.ant-table-row-selected td {
129
- // background: transparent;
130
- // }
131
- &-alert {
132
- margin-bottom: 8px;
133
- &-message when(@theme=default) {
134
- color: fade(@black, 65%);
135
- }
136
- &-message when(@theme=dark) {
137
- color: @text-color;
138
- }
139
- &-info-content > strong {
140
- margin: 0 4px;
141
- color: #13c2c2;
142
- }
143
- &-info-option {
144
- margin-left: 10px;
145
- }
146
- }
147
- &-nodata {
148
- .ant-table-scroll {
149
- overflow-y: hidden;
150
- }
151
- }
152
- &-toolbar {
153
- display: table;
154
- width: 100%;
155
- margin: 16px 0;
156
- color: @text-color;
157
- }
158
- &-toolbar-left,
159
- &-toolbar-right {
160
- display: inline-block;
161
- display: table-cell;
162
- vertical-align: middle;
163
- }
164
- &-toolbar-left {
165
- color: @text-color;
166
- font-size: 16px;
167
- }
168
- &-toolbar-right {
169
- float: right;
170
- }
171
- &-toolbar-setting-item {
172
- display: inline-block;
173
- margin-left: 16px;
174
- color: @icon-color;
175
- font-size: 16px;
176
- vertical-align: middle;
177
- cursor: pointer;
178
- &:hover {
179
- color: @icon-color-hover;
180
- }
181
- }
182
- &-column-setting-title {
183
- height: 32px;
184
- line-height: 32px;
185
- a {
186
- display: inline-block;
187
- float: right;
188
- vertical-align: middle;
189
- }
190
- }
191
- &-column-setting-checkbox-wrapper {
192
- color: @text-color;
193
- vertical-align: middle;
194
- }
195
- &-space-item {
196
- display: inline-block;
197
- vertical-align: middle;
198
- }
199
- .react-resizable {
200
- position: relative;
201
- background-clip: padding-box;
202
- }
203
- .react-resizable-handle {
204
- position: absolute;
205
- right: -5px;
206
- bottom: 0;
207
- z-index: 1;
208
- width: 10px;
209
- height: 100%;
210
- cursor: col-resize;
211
- }
212
- }
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',
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":"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"}
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"],"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};\r\nexport default VtxExport;\r\n"],"mappings":"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"}
package/lib/vtx-form-layout/style/index.css CHANGED
@@ -17,11 +17,18 @@
17
17
  .vtx-form-layout .vtx-form-item .ant-form-item-label label::after {
18
18
  content: '';
19
19
  }
20
+ .vtx-form-layout .vtx-form-item-vertical {
21
+ -webkit-box-orient: vertical;
22
+ -webkit-box-direction: normal;
23
+ -ms-flex-direction: column;
24
+ flex-direction: column;
25
+ }
20
26
  .vtx-form-layout .vtx-form-item-vertical .ant-form-item-row {
21
27
  -webkit-box-orient: vertical;
22
28
  -webkit-box-direction: normal;
23
29
  -ms-flex-direction: column;
24
30
  flex-direction: column;
31
+ margin-bottom: 20px;
25
32
  }
26
33
  .vtx-form-layout .vtx-form-item-vertical .ant-form-item-label,
27
34
  .vtx-form-layout .vtx-form-item-vertical .ant-form-item-control {
package/lib/vtx-form-layout/style/index.less CHANGED
@@ -1,213 +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
- .ant-form-item-row {
21
- flex-direction: column;
22
- }
23
- .ant-form-item-label,
24
- .ant-form-item-control {
25
- line-height: @line-height-base;
26
- }
27
- .ant-form-item-label {
28
- margin-bottom: 8px;
29
- padding: 0 !important;
30
- white-space: initial;
31
- text-align: left;
32
- label {
33
- height: auto;
34
- }
35
- }
36
- }
37
- .ant-form-item-explain {
38
- font-size: @font-size-sm;
39
- }
40
- &--inline {
41
- flex: none;
42
- flex-direction: row;
43
- flex-wrap: nowrap;
44
- margin-right: 16px;
45
- margin-bottom: @view-item-margin-bottom !important;
46
- row-gap: 0;
47
- .ant-form-item-control-input {
48
- min-height: auto;
49
- }
50
- .ant-form-item-label {
51
- flex: none;
52
- margin-bottom: 0;
53
- & > label {
54
- height: auto;
55
- color: @text-color;
56
- }
57
- label::after {
58
- content: ':';
59
- }
60
- }
61
- }
62
- &--view {
63
- .ant-form-item-label,
64
- .ant-form-item-control {
65
- line-height: @line-height-base;
66
- }
67
- .ant-form-item-label {
68
- & > label {
69
- height: auto;
70
- color: @text-color;
71
- }
72
- label::after {
73
- content: ':';
74
- }
75
- }
76
- .ant-form-item-control {
77
- color: @text-color;
78
- .ant-form-item-control-input {
79
- min-height: auto;
80
- }
81
- }
82
- }
83
- }
84
- .vtx-form-item-col {
85
- .ant-form-item {
86
- margin-bottom: 20px;
87
- }
88
- .vtx-form-item--view {
89
- margin-bottom: 0;
90
- }
91
- .ant-form-item-with-help {
92
- margin-bottom: 0;
93
- }
94
- .ant-form-item-explain {
95
- min-height: 20px;
96
- }
97
- }
98
- .vtx-form-card {
99
- position: relative;
100
- width: 100%;
101
- overflow: hidden;
102
- &-expand-icon {
103
- color: fade(@text-color, 75%);
104
- transition: transform 0.24s, -webkit-transform 0.24s;
105
- }
106
- .ant-card-body {
107
- padding: 0;
108
- }
109
- .ant-card-head-wrapper,
110
- .ant-card-head-title {
111
- line-height: 1;
112
- }
113
- &-content {
114
- display: flex;
115
- flex-flow: row wrap;
116
- padding: 20px 24px;
117
- padding-bottom: 0;
118
- &::after {
119
- clear: both;
120
- }
121
- &::before,
122
- &::after {
123
- display: table;
124
- content: '';
125
- }
126
- }
127
- &-content-hide {
128
- display: none;
129
- }
130
- }
131
- .vtx-form-card + .vtx-form-card {
132
- margin-top: 20px;
133
- }
134
- .vtx-form-pane {
135
- position: relative;
136
- box-sizing: border-box;
137
- width: 100%;
138
- &::after {
139
- clear: both;
140
- }
141
- &::before,
142
- &::after {
143
- display: table;
144
- content: '';
145
- }
146
- &-title {
147
- margin-bottom: 16px;
148
- overflow: hidden;
149
- color: @text-color;
150
- font-weight: 500;
151
- line-height: @line-height-base;
152
- list-style: none;
153
- }
154
- &-content {
155
- display: flex;
156
- flex-flow: row wrap;
157
- &::after {
158
- clear: both;
159
- }
160
- &::before,
161
- &::after {
162
- display: table;
163
- content: '';
164
- }
165
- }
166
- }
167
- .vtx-form-divider {
168
- margin: 0;
169
- margin-bottom: 20px;
170
- &--small {
171
- margin-bottom: 16px;
172
- }
173
- }
174
- .vtx-form-tabs {
175
- width: 100%;
176
- .ant-tabs-bar {
177
- padding-right: @padding-sm;
178
- padding-left: @padding-sm;
179
- border-bottom: none;
180
- }
181
- .ant-tabs-tab {
182
- padding: 5px 0 10px 0;
183
- }
184
- }
185
- &-vertical {
186
- padding: 0 @padding-sm;
187
- .vtx-form-item-col {
188
- padding-right: @padding-sm;
189
- padding-left: @padding-sm;
190
- }
191
- .vtx-form-card-content {
192
- padding: 20px @padding-sm;
193
- padding-bottom: 0;
194
- }
195
- .vtx-form-pane-title {
196
- padding: 0 @padding-sm;
197
- }
198
- }
199
- &-has-card {
200
- padding: 0;
201
- .vtx-form-tabs .ant-tabs-bar {
202
- padding: 0 @padding-lg;
203
- }
204
- }
205
- &-view {
206
- .vtx-form-item-col {
207
- margin-bottom: @view-item-margin-bottom;
208
- }
209
- .vtx-form-divider {
210
- margin-bottom: @view-item-margin-bottom;
211
- }
212
- }
213
- }
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.13",
3
+ "version": "3.1.15",
4
4
  "description": "React components for Vortex",
5
5
  "keywords": [
6
6
  "react",