@lambo-design/schema-paging-table 1.0.0-beta.5 → 1.0.0-beta.50

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