@lambo-design/schema-paging-table 1.0.0-beta.3 → 1.0.0-beta.31

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 (2) hide show
  1. package/package.json +14 -6
  2. package/src/index.vue +513 -358
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lambo-design/schema-paging-table",
3
- "version": "1.0.0-beta.3",
3
+ "version": "1.0.0-beta.31",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "lambo",
@@ -10,10 +10,18 @@
10
10
  "registry": "https://registry.npmjs.org/"
11
11
  },
12
12
  "devDependencies": {
13
- "@lambo-design/core": "^4.7.1-beta.103",
14
- "@lambo-design/shared": "^1.0.0-beta.93",
15
- "@lambo-design/paging-table": "^1.0.0-beta.69",
16
- "@lambo-design/schema-form": "^1.0.0-beta.24"
13
+ "standard-version": "^9.5.0",
14
+ "@lambo-design/shared": "^1.0.0-beta.200",
15
+ "@lambo-design/schema-form": "^1.0.0-beta.56",
16
+ "@lambo-design/paging-table": "^1.0.0-beta.77",
17
+ "@lambo-design/core": "^4.7.1-beta.139"
17
18
  },
18
- "scripts": {}
19
+ "scripts": {
20
+ "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
21
+ "release-major": "standard-version --release-as major",
22
+ "release-minor": "standard-version --release-as minor",
23
+ "release-patch": "standard-version --release-as patch",
24
+ "release-beta": "standard-version --prerelease beta",
25
+ "re-publish": "pnpm publish --access public --no-git-checks"
26
+ }
19
27
  }
package/src/index.vue CHANGED
@@ -1,358 +1,513 @@
1
- <template>
2
- <LamboPagingTable
3
- ref="schemaPagingTable"
4
- :dataUrl="dataUrl"
5
- :columns="tableColumn"
6
- :searchParams="tableSearchParams"
7
- :transformResponse="transformResponse"
8
- @on-row-click="onRowClick"
9
- @on-selection-change="onSelectionChange"
10
- @on-select="onSelect"
11
- @on-select-cancel="onSelectCancel"
12
- @on-select-all="onSelectAll"
13
- @on-select-all-cancel="onSelectAllCancel">
14
- <div slot="search">
15
- <LamboSchemaForm :labelWidth="100" ref="lamboSchemaForm" v-model="queryForm" :form-type="'search'" :fieldList="formFields" @doSearch="doSearch" @reset="onReset"/>
16
- <div v-if="rowName" class="tags">
17
- <Tag v-for="item in selectTags" :key="item.key" :name="item.key" closable @on-close="tagClose">
18
- {{ item.value }}
19
- </Tag>
20
- </div>
21
- </div>
22
- <div slot="buttons">
23
- <Button
24
- v-if="spreadButton.length > 0"
25
- v-for="(item,index) in spreadButton"
26
- type="primary"
27
- :ghost="true"
28
- :icon="item.icon"
29
- v-permission="item.permission"
30
- :key="index"
31
- @click="doClick(item)"
32
- style="margin-right: 5px">
33
- {{ item.name }}
34
- </Button>
35
- <Dropdown v-if="dropDownButton.length > 0">
36
- <Button type="primary" :ghost="true" icon="md-more">
37
- 更多操作
38
- <Icon type="ios-arrow-down"></Icon>
39
- </Button>
40
- <DropdownMenu slot="list">
41
- <DropdownItem
42
- v-for="(item,index) in dropDownButton"
43
- v-permission="item.permission"
44
- :key="index"
45
- >
46
- <Icon :type="item.icon" style="margin-right: 5px"></Icon>
47
- <span @click="doClick(item)">{{ item.name }}</span>
48
- </DropdownItem>
49
- </DropdownMenu>
50
- </Dropdown>
51
- </div>
52
- </LamboPagingTable>
53
- </template>
54
- <script>
55
- import ajax from '@lambo-design/shared/utils/ajax'
56
- import { operateBtn, operateHref } from '@lambo-design/shared/utils/assist'
57
- import LamboPagingTable from '@lambo-design/paging-table'
58
- // import LamboSchemaForm from '@lambo-design/schema-form'
59
- // const LamboSchemaForm = ()=> import('@lambo-design/schema-form')
60
- export default {
61
- name:"schema-paging-table",
62
- components: {
63
- LamboSchemaForm: () => import('@lambo-design/schema-form'),
64
- LamboPagingTable,
65
- },
66
- data() {
67
- return {
68
- queryForm: null,
69
- tableSearchParams: {},
70
- selection: [],
71
- selectStore: [],
72
- selectTags: [],
73
- selectRows: [],
74
- selectedKeys: [],
75
- }
76
- },
77
- props:{
78
- dataUrl:{
79
- type: String,
80
- required: true,
81
- default: ''
82
- },
83
- columnList:{
84
- type: Array,
85
- required: true,
86
- default(){
87
- return []
88
- }
89
- },
90
- rowKey: {
91
- type: String,
92
- require: false,
93
- default: ""
94
- },
95
- rowName: {
96
- type: String,
97
- require: false,
98
- default: ""
99
- },
100
- form:{
101
- type: Object,
102
- required: true,
103
- default(){
104
- return {}
105
- }
106
- },
107
- formFields:{
108
- type: Array,
109
- required: true,
110
- default(){
111
- return []
112
- }
113
- },
114
- buttonList:{
115
- type: Array,
116
- required: true,
117
- default(){
118
- return []
119
- }
120
- },
121
- },
122
- computed: {
123
- tableColumn: function () {
124
- let columns = []
125
- let self = this
126
- self.columnList.forEach((item,index)=>{
127
- let obj = item
128
- if(obj.hasOwnProperty("enums") && obj.hasOwnProperty("translate") && obj.translate === 'enums'){
129
- obj.render = function (h, param) {
130
- let state = param.row[obj.key]
131
- return h('span', obj.enums[state])
132
- }
133
- }else if(obj.hasOwnProperty("type") && obj.type === "operate"){
134
- obj.render = (h, param) => {
135
- return h('div',
136
- obj.button.map((item,index)=>{
137
- return operateHref(self, h, param.row, item.name, (vm, currentRow) => {
138
- if(item.clickEvent?.type==="route"){
139
- // self.$Message.info(item.clickEvent.name)
140
- let query = item.clickEvent?.route?.keys?.reduce((acc,sourceItem)=>{
141
- return Object.assign(acc,{[sourceItem]:currentRow[sourceItem]})
142
- },{})
143
- this.$router.push({
144
- path: item.clickEvent?.route?.path,
145
- query
146
- })
147
- }else if(item.clickEvent?.type==="request"){
148
- // self.$Message.info(item.clickEvent.name)
149
- let data = item.clickEvent?.request?.keys?.reduce((acc,sourceItem)=>{
150
- return Object.assign(acc,{[sourceItem]:currentRow[sourceItem]})
151
- },{})
152
- let request = {
153
- url:item.clickEvent.request.url,
154
- method:item.clickEvent.request.method,
155
- param:data,
156
- }
157
- let response = item.clickEvent.response
158
- self.fetch(request,response)
159
- }else if(item.clickEvent?.type==="method"){
160
- let args = item.clickEvent?.method?.keys?.reduce((total,current)=>{
161
- return Object.assign(total,{[current]:currentRow[current]})
162
- },{})
163
- self.$emit(item.clickEvent?.method?.name,args)
164
- }else if(item.clickEvent?.type==="modal"){
165
- self.$Message.info(item.clickEvent.name)
166
- }
167
- },item.permission)
168
- })
169
- )
170
- }
171
- }
172
- columns.push(item)
173
- })
174
- return columns
175
- },
176
- spreadButton: function () {
177
- return this.buttonList.slice(0,3)
178
- },
179
- dropDownButton: function () {
180
- return this.buttonList.slice(3 - this.buttonList.length)
181
- },
182
- },
183
- watch:{
184
- form: function(val) {
185
- this.queryForm = val
186
- }
187
- },
188
- created() {
189
- },
190
- methods: {
191
- doClick(item){
192
- let self = this;
193
- if(item.clickEvent?.type==="route"){
194
- // self.$Message.info(item.clickEvent.name)
195
- let query = item.clickEvent?.route?.keys?.reduce((acc,sourceItem)=>{
196
- return Object.assign(acc,{[sourceItem]:param.row[sourceItem]})
197
- },{})
198
- this.$router.push({
199
- path: item.clickEvent?.route?.path,
200
- query
201
- })
202
- }else if(item.clickEvent?.type==="method"){
203
- // self.$Message.info(item.clickEvent.name)
204
- let param = item.clickEvent?.method?.keys?.reduce((acc,sourceItem)=>{
205
- return Object.assign(acc,{[sourceItem]:self.selection[sourceItem]})
206
- },{})
207
- self.$emit(item.clickEvent?.method?.name,param)
208
- }else if(item.clickEvent?.type==="modal"){
209
- self.$Message.info(item.clickEvent.name)
210
- }
211
- },
212
- doSearch: function () {
213
- this.tableSearchParams = Object.assign({}, this.queryForm)
214
- },
215
- onReset() {
216
- this.doSearch()
217
- },
218
- fetch: function (request,response) {
219
- let self = this
220
- let options = {
221
- url: request.url,
222
- method: request.method,
223
- [request.method==='GET'?"params":"data"]:request.param
224
- }
225
- ajax.request(options).then(function (resp) {
226
- // todo 判断返回码
227
- self.$Message.success(response.successMsg)
228
- self.doSearch()
229
- }).catch(function (err) {
230
- console.error(err)
231
- self.$Message.error(response.errorMsg)
232
- })
233
- },
234
- /**
235
- *
236
- * @param row
237
- * @param index
238
- */
239
- onRowClick: function (row, index) {
240
- this.selectOnChange(row, index);
241
- },
242
- //单选
243
- selectOnChange: function (row, index) {
244
- this.selection = Array(index).fill(false);
245
- this.selection.splice(index, 1, true);
246
- this.selectStore = [row];
247
- },
248
- //多选
249
- onSelectionChange: function (rows) {
250
- if (!this.rowKey) {
251
- this.selectStore = rows;
252
- } else {
253
- this.selectStore = rows;
254
- if (rows && rows.length > 0) {
255
- for (let i = 0; i < rows.length; i++) {
256
- let row = rows[i];
257
- if (!this.selectTags.some(item => item.key === row[this.rowKey])) {
258
- let tagItem = {"key": row[this.rowKey], "value": row[this.rowName]}
259
- this.selectTags.push(tagItem);
260
- }
261
- }
262
- }
263
- }
264
- },
265
- onSelect: function (selection, row) {
266
- if (this.rowKey) {
267
- this.selectRows[row[this.rowKey]] = row;
268
- }
269
- },
270
- onSelectCancel: function (selection, row) {
271
- if (this.rowKey) {
272
- delete this.selectRows[row[this.rowKey]];
273
- const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === row[this.rowKey])
274
- if (selectIndex > -1) {
275
- this.selectTags.splice(selectIndex, 1);
276
- }
277
- }
278
- },
279
- onSelectAll: function (selection) {
280
- if (this.rowKey) {
281
- for (let item of selection) {
282
- this.selectRows[item[this.rowKey]] = item;
283
- }
284
- }
285
- },
286
- onSelectAllCancel: function () {
287
- if (this.rowKey) {
288
- let currentTableData = this.$refs.schemaPagingTable.$data.tableData;
289
- for (let i = 0; i < currentTableData.length; i++) {
290
- let tempData = currentTableData[i][this.rowKey];
291
- delete this.selectRows[tempData];
292
- const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === tempData)
293
- if (selectIndex > -1) {
294
- this.selectTags.splice(selectIndex, 1);
295
- }
296
- }
297
- }
298
- },
299
- transformResponse: function (resp) {
300
- if (this.rowKey) {
301
- let self = this;
302
- if (resp.code === 1 || resp.code === "000") {
303
- let tableData = resp.data.rows;
304
- for (let i = 0; i < tableData.length; i++) {
305
- if (self.selectRows[tableData[i][self.rowKey]]) {
306
- tableData[i]._checked = true;
307
- }
308
- }
309
- resp.data.rows = tableData;
310
- }
311
- }
312
- return resp;
313
- },
314
- clearSelectData: function () {
315
- this.selection = [];//清空已选项
316
- this.selectStore = [];//清空已选数据
317
- this.selectRows = [];//清空已选数据
318
- this.selectTags = [];//清空所选标签
319
- this.selectedKeys = [];//清空默认选择
320
- },
321
- tagClose: function (event, name) {
322
- const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === name)
323
- const dataIndex = (this.$refs.schemaPagingTable.$data.tableData || []).findIndex((selectItem) => selectItem[this.rowKey] === name)
324
- if (selectIndex > -1) {
325
- this.selectTags.splice(selectIndex, 1);
326
- this.selectStore.splice(selectIndex, 1);
327
- }
328
- delete this.selectRows[name];
329
- if (dataIndex > -1) {
330
- this.$refs.schemaPagingTable.$refs.tableRef.toggleSelect(dataIndex);
331
- }
332
- },
333
- getSelection(){
334
- if (this.selectRows.length > 0 && this.rowKey) {
335
- let selectStore = [];
336
- for (let item in this.selectRows) {
337
- selectStore.push(this.selectRows[item]);
338
- }
339
- this.selectStore = selectStore;
340
- }
341
- return this.selectStore
342
- }
343
- }
344
- }
345
- </script>
346
- <style lang="less" scoped>
347
- .lambo-grid-table {
348
- /deep/.ivu-form {
349
- .ivu-form-item {
350
- display: block !important;
351
- }
352
- }
353
- }
354
- .tags {
355
- margin: 10px auto;
356
- }
357
- </style>
358
-
1
+ <template>
2
+ <LamboPagingTable
3
+ ref="schemaPagingTable"
4
+ :dataUrl="dataUrl"
5
+ :columns="tableColumn"
6
+ :autoSearch="autoSearch"
7
+ :searchParams="tableSearchParams"
8
+ :transformResponse="transformResponse"
9
+ :showTableOption="showTableOption"
10
+ @on-row-click="onRowClick"
11
+ @on-selection-change="onSelectionChange"
12
+ @on-select="onSelect"
13
+ @on-select-cancel="onSelectCancel"
14
+ @on-select-all="onSelectAll"
15
+ @on-select-all-cancel="onSelectAllCancel">
16
+ <div slot="search">
17
+ <LamboSchemaForm
18
+ ref="lamboSchemaForm"
19
+ v-model="queryForm"
20
+ :form-type="'search'"
21
+ :fieldList="formFields"
22
+ :labelWidth="labelWidth"
23
+ :default-rows="2"
24
+ :grid-columns="gridColumns"
25
+ :customComponents="customComponents"
26
+ :customValidates="customValidates"
27
+ @doSearch="doSearch" @reset="onReset"/>
28
+ <div v-if="rowName" class="tags">
29
+ <Tag v-for="item in selectTags" :key="item.key" :name="item.key" closable @on-close="tagClose">
30
+ {{ item.value }}
31
+ </Tag>
32
+ </div>
33
+ </div>
34
+ <div slot="buttons" style="display: flex">
35
+ <div ref="container" :class="collapsed ? 'buttons-hidden' : ''" style="width: 100%">
36
+ <Button
37
+ ref="buttons"
38
+ v-if="dropDownButton.length > 0"
39
+ v-for="(item,index) in dropDownButton"
40
+ type="primary"
41
+ :ghost="true"
42
+ :icon="item.icon"
43
+ v-permission="item.permission"
44
+ :key="index"
45
+ @click="doClick(item)"
46
+ style="margin:0 5px 5px 0">
47
+ {{ item.name }}
48
+ </Button>
49
+ </div>
50
+ <div>
51
+ <Button v-if="totalButtons.length > buttonsInFirstRow" type="text" class="more-btn" @click=setCollapse>
52
+ {{collapsed ?'展开':'收起'}}
53
+ <Icon :type="collapsed ? 'ios-arrow-down' : 'ios-arrow-up'"></Icon>
54
+ </Button>
55
+ </div>
56
+ </div>
57
+ </LamboPagingTable>
58
+ </template>
59
+ <script>
60
+ import ajax from '@lambo-design/shared/utils/ajax'
61
+ import {operateBtn, operateHref, operateMore} from '@lambo-design/shared/utils/assist'
62
+ import LamboPagingTable from '@lambo-design/paging-table'
63
+ // import LamboSchemaForm from '@lambo-design/schema-form'
64
+ // const LamboSchemaForm = ()=> import('@lambo-design/schema-form')
65
+ export default {
66
+ name:"schema-paging-table",
67
+ components: {
68
+ LamboSchemaForm: () => import('@lambo-design/schema-form'),
69
+ LamboPagingTable,
70
+ },
71
+ data() {
72
+ return {
73
+ buttonsInFirstRow:0,
74
+ totalButtons:0,
75
+ collapsed:true,
76
+ queryForm: {},
77
+ tableSearchParams: {},
78
+ selection: [],
79
+ selectStore: [],
80
+ selectTags: [],
81
+ selectRows: [],
82
+ selectedKeys: [],
83
+ }
84
+ },
85
+ props:{
86
+ dataUrl:{
87
+ type: String,
88
+ required: true,
89
+ default: ''
90
+ },
91
+ autoSearch: {
92
+ type: Boolean,
93
+ required: false,
94
+ default: false
95
+ },
96
+ columnList:{
97
+ type: Array,
98
+ required: true,
99
+ default(){
100
+ return []
101
+ }
102
+ },
103
+ showTableOption: {
104
+ type: Boolean,
105
+ default: true
106
+ },
107
+ rowKey: {
108
+ type: String,
109
+ require: false,
110
+ default: ""
111
+ },
112
+ rowName: {
113
+ type: String,
114
+ require: false,
115
+ default: ""
116
+ },
117
+ labelWidth: {
118
+ type: Number,
119
+ require: false,
120
+ default: 100
121
+ },
122
+ operColumnDropdownNum: {
123
+ type: Number,
124
+ require: false,
125
+ default: 2
126
+ },
127
+ form:{
128
+ type: Object,
129
+ required: true,
130
+ default(){
131
+ return {}
132
+ }
133
+ },
134
+ formFields:{
135
+ type: Array,
136
+ required: true,
137
+ default(){
138
+ return []
139
+ }
140
+ },
141
+ buttonList:{
142
+ type: Array,
143
+ required: true,
144
+ default(){
145
+ return []
146
+ }
147
+ },
148
+ gridColumns:{
149
+ type: Number,
150
+ default: 4
151
+ },
152
+ customComponents: Object,
153
+ customValidates: Object,
154
+ //父组件回填已选中的值
155
+ selectedKey: {
156
+ type: Array,
157
+ require: false,
158
+ default: () => {return []}
159
+ }
160
+ },
161
+ computed: {
162
+ tableColumn: function () {
163
+ let columns = []
164
+ let self = this
165
+ self.columnList.forEach((item,index)=>{
166
+ let obj = item
167
+ if(obj.hasOwnProperty("enums") && obj.hasOwnProperty("translate") && obj.translate === 'enums'){
168
+ obj.render = function (h, param) {
169
+ let state = param.row[obj.key]
170
+ return h('span', obj.enums[state])
171
+ }
172
+ }else if(obj.hasOwnProperty("type") && obj.type === "operate"){
173
+ obj.render = (h, param) => {
174
+ let visibleDomsd = [];
175
+ let dropdownDomsd = [];
176
+ obj.button.map((item, index) => {
177
+ const conditionMet = item && typeof item.condition === "function" ? item.condition(param) : true;
178
+ if(conditionMet){
179
+ let doms = operateHref(self, h, param.row, item.name || param.row[obj.key], (vm, currentRow) => {
180
+ if (item.clickEvent?.type === "route") {
181
+ // self.$Message.info(item.clickEvent.name)
182
+ let query = item.clickEvent?.route?.keys?.reduce((acc, sourceItem) => {
183
+ return Object.assign(acc, {[sourceItem]: currentRow[sourceItem]})
184
+ }, {})
185
+ self.$router.push({
186
+ path: item.clickEvent?.route?.path,
187
+ query
188
+ })
189
+ } else if (item.clickEvent?.type === "request") {
190
+ // self.$Message.info(item.clickEvent.name)
191
+ let data = item.clickEvent?.request?.keys?.reduce((acc, sourceItem) => {
192
+ return Object.assign(acc, {[sourceItem]: currentRow[sourceItem]})
193
+ }, {})
194
+ let request = {
195
+ url: item.clickEvent.request.url,
196
+ method: item.clickEvent.request.method,
197
+ param: data,
198
+ }
199
+ let response = item.clickEvent.response
200
+ if (item.clickEvent.tips) {
201
+ let tips = item.clickEvent.tips
202
+ this.$Modal.confirm({
203
+ title: tips.title,
204
+ content: '<p>' + tips.content + '</p>',
205
+ onOk: () => {
206
+ self.fetch(request, response)
207
+ }
208
+ });
209
+ } else {
210
+ self.fetch(request, response)
211
+ }
212
+ } else if (item.clickEvent?.type === "method") {
213
+ let args = item.clickEvent?.method?.keys?.reduce((total, current) => {
214
+ return Object.assign(total, {[current]: currentRow[current]})
215
+ }, {})
216
+ self.$emit(item.clickEvent?.method?.name, args)
217
+ } else if (item.clickEvent?.type === "modal") {
218
+ self.$Message.info(item.clickEvent.name)
219
+ }
220
+ }, item.permission)
221
+ if (visibleDomsd.length < self.operColumnDropdownNum) {
222
+ visibleDomsd.push(doms);
223
+ } else if (visibleDomsd.length === self.operColumnDropdownNum){
224
+ dropdownDomsd.push(h('DropdownItem', {}, [visibleDomsd[self.operColumnDropdownNum - 1]]))
225
+ dropdownDomsd.push(h('DropdownItem', {}, [doms]))
226
+ } else {
227
+ dropdownDomsd.push(h('DropdownItem', {}, [doms]))
228
+ }
229
+ }
230
+ })
231
+ if (dropdownDomsd.length !== 0) {
232
+ visibleDomsd.splice(self.operColumnDropdownNum - 1, 1)
233
+ }
234
+ return h('div', {}, [
235
+ ...visibleDomsd,
236
+ dropdownDomsd.length !== 0 ? operateMore(self,h,dropdownDomsd) : null
237
+ ]);
238
+ }
239
+ }
240
+ columns.push(item)
241
+ })
242
+ return columns
243
+ },
244
+ // spreadButton: function () {
245
+ // return this.buttonList.slice(0,3)
246
+ // },
247
+ dropDownButton: function () {
248
+ // let list = [...this.buttonList,...this.buttonList]
249
+ // return list.splice(0,7)
250
+ return this.buttonList
251
+ },
252
+ multiSelect: function() {
253
+ return this.columnList.some((item)=>{
254
+ return item.type === "selection"
255
+ })
256
+ }
257
+ },
258
+ watch: {
259
+ form: {
260
+ handler: function (val) {
261
+ this.tableSearchParams = val
262
+ this.queryForm = val
263
+ },
264
+ deep: true
265
+ },
266
+ selectedKey: function () {
267
+ this.selectedKeys = this.selectedKey
268
+ //重置标签
269
+ this.selectTags = []
270
+ if (this.rowKey) {
271
+ for (let item of this.selectedKeys) {
272
+ this.selectRows[item[this.rowKey]] = item;
273
+ let tagItem = {"key": item[this.rowKey], "value": item[this.rowName]}
274
+ this.selectTags.push(tagItem);
275
+ }
276
+ }
277
+ }
278
+ },
279
+ created() {
280
+ let self = this
281
+ setTimeout(()=>{
282
+ self.calculateButtonsInFirstRow();
283
+ },1000)
284
+ window.addEventListener('resize', this.calculateButtonsInFirstRow);
285
+ },
286
+ beforeDestroy() {
287
+ window.removeEventListener('resize', this.calculateButtonsInFirstRow);
288
+ },
289
+ methods: {
290
+ //计算第一行有多少个button,根据父div宽度和每个button的宽度计算
291
+ calculateButtonsInFirstRow() {
292
+ let container = this.$refs.container
293
+ if (!container){return}
294
+ let containerWidth = ''
295
+ if (container.offsetWidth === undefined){
296
+ }
297
+ containerWidth = container.offsetWidth
298
+ const buttons = this.$refs.buttons;
299
+ let totalWidth = 0;
300
+ let buttonsInFirstRow = 0;
301
+ for (let i = 0; buttons && i < buttons.length; i++) {
302
+ totalWidth += buttons[i].$el.offsetWidth + 5
303
+ if (totalWidth <= containerWidth) {
304
+ buttonsInFirstRow++;
305
+ } else {
306
+ break;
307
+ }
308
+ }
309
+ this.totalButtons = this.dropDownButton
310
+ this.buttonsInFirstRow = buttonsInFirstRow;
311
+ },
312
+
313
+ setCollapse: function() {
314
+ this.collapsed = !this.collapsed
315
+ },
316
+ doClick(item){
317
+ let self = this;
318
+ if (item.clickEvent?.type === "route") {
319
+ const routeInfo = item.clickEvent.route;
320
+ const keysExist = routeInfo.keys && routeInfo.keys.length !== 0 && self.multiSelect;
321
+ const selection = keysExist ? self.getSelection() : null;
322
+ if (keysExist && selection.length !== 1) {
323
+ self.$Message.info('请只选择一条记录!');
324
+ return;
325
+ }
326
+ const query = keysExist
327
+ ? routeInfo.keys.reduce((acc, key) => ({ ...acc, [key]: selection[0][key] }), {})
328
+ : null;
329
+ this.$router.push({ path: routeInfo.path, query })
330
+ } else if (item.clickEvent?.type === "method") {
331
+ let selection = self.getSelection()
332
+ if (selection.length === 0) {
333
+ self.$Message.info('请选择一条记录!')
334
+ return
335
+ }
336
+ if (self.multiSelect) {
337
+ let param = selection.map((select, index) => {
338
+ if (item.clickEvent?.method?.keys) {
339
+ let obj = item.clickEvent?.method?.keys?.reduce((acc, sourceItem) => {
340
+ return Object.assign(acc, {[sourceItem]: select[sourceItem]})
341
+ }, {})
342
+ return obj
343
+ } else {
344
+ return item
345
+ }
346
+ })
347
+ self.$emit(item.clickEvent?.method?.name, param)
348
+ } else {
349
+ if (item.clickEvent?.method?.keys) {
350
+ let param = item.clickEvent?.method?.keys?.reduce((acc, sourceItem) => {
351
+ return Object.assign(acc, {[sourceItem]: selection[0][sourceItem]})
352
+ }, {})
353
+ self.$emit(item.clickEvent?.method?.name, param)
354
+ } else {
355
+ let param = selection[0]
356
+ self.$emit(item.clickEvent?.method?.name, param)
357
+ }
358
+ }
359
+ }
360
+ },
361
+ doSearch: function () {
362
+ this.tableSearchParams = Object.assign({}, this.queryForm)
363
+ },
364
+ onReset() {
365
+ // Object.assign(this.queryForm, this.$options.propsData.form)
366
+ this.queryForm = this.$options.propsData.form;
367
+ this.doSearch()
368
+ },
369
+ fetch: function (request,response) {
370
+ let self = this
371
+ let options = {
372
+ url: request.url,
373
+ method: request.method,
374
+ [request.method==='GET'?"params":"data"]:request.param
375
+ }
376
+ ajax.request(options).then(function (resp) {
377
+ // todo 判断返回码
378
+ self.$Message.success(response.successMsg)
379
+ self.doSearch()
380
+ }).catch(function (err) {
381
+ console.error(err)
382
+ self.$Message.error(response.errorMsg)
383
+ })
384
+ },
385
+ /**
386
+ *
387
+ * @param row
388
+ * @param index
389
+ */
390
+ onRowClick: function (row, index) {
391
+ this.selectOnChange(row, index);
392
+ },
393
+ //单选
394
+ selectOnChange: function (row, index) {
395
+ this.selection = Array(index).fill(false);
396
+ this.selection.splice(index, 1, true);
397
+ this.selectStore = [row];
398
+ },
399
+ //多选
400
+ onSelectionChange: function (rows) {
401
+ if (!this.rowKey) {
402
+ this.selectStore = rows;
403
+ } else {
404
+ this.selectStore = rows;
405
+ if (rows && rows.length > 0) {
406
+ for (let i = 0; i < rows.length; i++) {
407
+ let row = rows[i];
408
+ if (!this.selectTags.some(item => item.key === row[this.rowKey])) {
409
+ let tagItem = {"key": row[this.rowKey], "value": row[this.rowName]}
410
+ this.selectTags.push(tagItem);
411
+ }
412
+ }
413
+ }
414
+ }
415
+ },
416
+ onSelect: function (selection, row) {
417
+ if (this.rowKey) {
418
+ this.selectRows[row[this.rowKey]] = row;
419
+ }
420
+ },
421
+ onSelectCancel: function (selection, row) {
422
+ if (this.rowKey) {
423
+ delete this.selectRows[row[this.rowKey]];
424
+ const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === row[this.rowKey])
425
+ if (selectIndex > -1) {
426
+ this.selectTags.splice(selectIndex, 1);
427
+ }
428
+ }
429
+ },
430
+ onSelectAll: function (selection) {
431
+ if (this.rowKey) {
432
+ for (let item of selection) {
433
+ this.selectRows[item[this.rowKey]] = item;
434
+ }
435
+ }
436
+ },
437
+ onSelectAllCancel: function () {
438
+ if (this.rowKey) {
439
+ let currentTableData = this.$refs.schemaPagingTable.$data.tableData;
440
+ for (let i = 0; i < currentTableData.length; i++) {
441
+ let tempData = currentTableData[i][this.rowKey];
442
+ delete this.selectRows[tempData];
443
+ const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === tempData)
444
+ if (selectIndex > -1) {
445
+ this.selectTags.splice(selectIndex, 1);
446
+ }
447
+ }
448
+ }
449
+ },
450
+ transformResponse: function (resp) {
451
+ if (this.rowKey) {
452
+ let self = this;
453
+ if (resp.code === 1 || resp.code === "000") {
454
+ let tableData = resp.data.rows;
455
+ for (let i = 0; i < tableData.length; i++) {
456
+ if (self.selectRows[tableData[i][self.rowKey]]) {
457
+ tableData[i]._checked = true;
458
+ }
459
+ }
460
+ resp.data.rows = tableData;
461
+ }
462
+ }
463
+ return resp;
464
+ },
465
+ clearSelectData: function () {
466
+ this.selection = [];//清空已选项
467
+ this.selectStore = [];//清空已选数据
468
+ this.selectRows = [];//清空已选数据
469
+ this.selectTags = [];//清空所选标签
470
+ this.selectedKeys = [];//清空默认选择
471
+ },
472
+ tagClose: function (event, name) {
473
+ const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === name)
474
+ const dataIndex = (this.$refs.schemaPagingTable.$data.tableData || []).findIndex((selectItem) => selectItem[this.rowKey] === name)
475
+ if (selectIndex > -1) {
476
+ this.selectTags.splice(selectIndex, 1);
477
+ this.selectStore.splice(selectIndex, 1);
478
+ }
479
+ delete this.selectRows[name];
480
+ if (dataIndex > -1) {
481
+ this.$refs.schemaPagingTable.$refs.tableRef.toggleSelect(dataIndex);
482
+ }
483
+ },
484
+ getSelection(){
485
+ if (this.selectRows.length > 0 && this.rowKey) {
486
+ let selectStore = [];
487
+ for (let item in this.selectRows) {
488
+ selectStore.push(this.selectRows[item]);
489
+ }
490
+ this.selectStore = selectStore;
491
+ }
492
+ return this.selectStore
493
+ }
494
+ }
495
+ }
496
+ </script>
497
+ <style lang="less" scoped>
498
+ .lambo-grid-table {
499
+ /deep/.ivu-form {
500
+ .ivu-form-item {
501
+ display: block;
502
+ }
503
+ }
504
+ }
505
+ .tags {
506
+ margin: 10px auto;
507
+ }
508
+ .buttons-hidden{
509
+ height:33px;
510
+ overflow: hidden;
511
+ }
512
+ </style>
513
+