doway-coms 1.6.45 → 1.6.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "doway-coms",
3
- "version": "1.6.45",
3
+ "version": "1.6.47",
4
4
  "description": "doway组件库",
5
5
  "author": "dowaysoft",
6
6
  "main": "packages/index.js",
@@ -63,6 +63,7 @@
63
63
  :columns="internalColumns"
64
64
  class="base-grid-view"
65
65
  :height="'auto'"
66
+ :maxHeight="expandHeight"
66
67
  :show-footer="showFooter"
67
68
  @scroll="bodyScroll"
68
69
  :row-class-name="gridRowStyle"
@@ -760,6 +761,11 @@ export default {
760
761
  height: {
761
762
  default: null,
762
763
  },
764
+ // 当前展开行最大高度
765
+ expandHeight: {
766
+ type: String,
767
+ default: undefined,
768
+ },
763
769
  pager: {
764
770
  type: Object,
765
771
  default: () => {
@@ -941,27 +947,7 @@ export default {
941
947
  }
942
948
  this.gridEdit = this.edit;
943
949
  },
944
-
945
- mounted() {
946
- // this.toggleFixedColumn('operation','right')
947
- //设置默认筛选的到表格
948
- // let filterCol = this.internalColumns.filter(
949
- // x =>
950
- // (x.filters && x.filters.length > 0) ||
951
- // (x.children &&
952
- // x.children.length > 0 &&
953
- // x.children[0].filters &&
954
- // x.children[0].filters.length > 0)
955
- // )
956
- // for (let i = 0; i < filterCol.length; i++) {
957
- // this.$refs.baseGrid
958
- // .setFilter(filterCol[i].field, filterCol[i].filters)
959
- // .then(() => {
960
- // // if (i == filterCol.length - 1) {
961
- // // }
962
- // })
963
- // }
964
- },
950
+ mounted() {},
965
951
  methods: {
966
952
  exportDataEvent () {
967
953
  this.$refs.baseGrid.exportData({ type: 'csv' })
@@ -6,7 +6,7 @@
6
6
  :loading="adjustGridLoading"
7
7
  @resizable-change="resizableChange"
8
8
  :filter-config="{
9
- remote: true
9
+ remote: true,
10
10
  }"
11
11
  :sort-config="{
12
12
  multiple: true,
@@ -20,7 +20,7 @@
20
20
  <template #empty>
21
21
  <div>拖拽调整字段位置或者宽度</div>
22
22
  </template>
23
- <!-- 是否显示字段 -->
23
+ <!-- 是否显示字段 -->
24
24
  <template #checkbox="{ column }">
25
25
  <a-checkbox
26
26
  v-model="column.params.show"
@@ -29,244 +29,259 @@
29
29
  {{ column.title }}
30
30
  </template>
31
31
 
32
- <!-- 筛选过滤 -->
33
- <template #text_filter="scope">
34
- <div class="interceptor-class">
35
- <div
36
- :class="scope.column.field + '_filter_' + $index"
37
- v-for="(loopFilterValue, $index) in scope.column.filters[0].data
32
+ <!-- 筛选过滤 -->
33
+ <template #text_filter="scope">
34
+ <div class="interceptor-class">
35
+ <div
36
+ :class="scope.column.field + '_filter_' + $index"
37
+ v-for="(loopFilterValue, $index) in scope.column.filters[0].data
38
38
  .displayValues"
39
- :key="$index"
40
- >
41
- <a-input allowClear v-model="loopFilterValue.value[0]" @keyup.enter.native="filterConfirm(scope.column)" />
42
- </div>
43
- <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
44
- <a-button @click="filterConfirm(scope.column)">确认</a-button>
45
- </div>
46
- </template>
47
- <template #customCell_filter="scope">
48
- <div class="interceptor-class">
49
- <div
50
- :class="scope.column.field + '_filter_' + $index"
51
- v-for="(loopFilterValue, $index) in scope.column.filters[0].data
39
+ :key="$index"
40
+ >
41
+ <a-input
42
+ allowClear
43
+ v-model="loopFilterValue.value[0]"
44
+ @keyup.enter.native="filterConfirm(scope.column)"
45
+ />
46
+ </div>
47
+ <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
48
+ <a-button @click="filterConfirm(scope.column)">确认</a-button>
49
+ </div>
50
+ </template>
51
+ <template #customCell_filter="scope">
52
+ <div class="interceptor-class">
53
+ <div
54
+ :class="scope.column.field + '_filter_' + $index"
55
+ v-for="(loopFilterValue, $index) in scope.column.filters[0].data
52
56
  .displayValues"
53
- :key="$index"
54
- >
55
- <a-input allowClear v-model="loopFilterValue.value[0]" @keyup.enter.native="filterConfirm(scope.column)" />
56
- </div>
57
- <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
58
- <a-button @click="filterConfirm(scope.column)">确认</a-button>
59
- </div>
60
- </template>
61
- <template #pulldown_filter="scope">
62
- <div class="interceptor-class">
63
- <div
64
- :class="scope.column.field + '_filter_' + $index"
65
- v-for="(loopFilterValue, $index) in scope.column.filters[0].data
57
+ :key="$index"
58
+ >
59
+ <a-input
60
+ allowClear
61
+ v-model="loopFilterValue.value[0]"
62
+ @keyup.enter.native="filterConfirm(scope.column)"
63
+ />
64
+ </div>
65
+ <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
66
+ <a-button @click="filterConfirm(scope.column)">确认</a-button>
67
+ </div>
68
+ </template>
69
+ <template #pulldown_filter="scope">
70
+ <div class="interceptor-class">
71
+ <div
72
+ :class="scope.column.field + '_filter_' + $index"
73
+ v-for="(loopFilterValue, $index) in scope.column.filters[0].data
66
74
  .displayValues"
67
- :key="$index"
68
- >
69
- <a-input allowClear v-model="loopFilterValue.value[0]" @keyup.enter.native="filterConfirm(scope.column)" />
70
- </div>
71
- <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
72
- <a-button @click="filterConfirm(scope.column)">确认</a-button>
73
- </div>
74
- </template>
75
- <template #number_filter="scope">
76
- <div class="interceptor-class">
77
- <div
78
- :class="scope.column.field + '_filter_' + $index"
79
- v-for="(loopFilterValue, $index) in scope.column.filters[0].data
75
+ :key="$index"
76
+ >
77
+ <a-input
78
+ allowClear
79
+ v-model="loopFilterValue.value[0]"
80
+ @keyup.enter.native="filterConfirm(scope.column)"
81
+ />
82
+ </div>
83
+ <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
84
+ <a-button @click="filterConfirm(scope.column)">确认</a-button>
85
+ </div>
86
+ </template>
87
+ <template #number_filter="scope">
88
+ <div class="interceptor-class">
89
+ <div
90
+ :class="scope.column.field + '_filter_' + $index"
91
+ v-for="(loopFilterValue, $index) in scope.column.filters[0].data
80
92
  .displayValues"
81
- :key="$index"
82
- >
83
- <a-input-number
84
- :precision="0"
85
- size="small"
86
- v-model="loopFilterValue.value[0]"
87
- @keyup.enter.native="filterConfirm(scope.column)"
88
- />~
89
- <a-input-number
90
- :precision="0"
91
- size="small"
92
- v-model="loopFilterValue.value[1]"
93
- @keyup.enter.native="filterConfirm(scope.column)"
94
- />
95
- </div>
96
- <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
97
- <a-button @click="filterConfirm(scope.column)">确认</a-button>
98
- </div>
99
- </template>
100
- <template #select_filter="scope">
101
- <div class="interceptor-class">
102
- <a-checkbox-group
103
- v-model="scope.column.filters[0].data.displayValues"
104
- :style="{
105
- display: 'flex',
106
- flexWrap: 'wrap',
107
- justifyContent: 'left',
108
- alignItems: 'center',
109
- maxHeight: '150px',
110
- overflow: 'auto',
111
- maxWidth: '100px'
112
- }"
113
- @keyup.enter.native="filterConfirm(scope.column)"
114
- >
115
- <br />
116
- <a-checkbox
117
- v-for="loopSource in scope.column.params.dataSource"
118
- :key="loopSource.value"
119
- :value="loopSource.value"
120
- style="margin: 5px 0;"
121
- >{{ loopSource.caption }}
122
- </a-checkbox>
123
- </a-checkbox-group>
124
- <!-- <a-select-->
125
- <!-- v-model="scope.column.filters[0].data.displayValues"-->
126
- <!-- mode="multiple"-->
127
- <!-- allowClear-->
128
- <!-- style="width: 300px;"-->
129
- <!-- placeholder="筛选条件"-->
130
- <!-- showArrow-->
131
- <!-- >-->
132
- <!-- <a-select-option-->
133
- <!-- v-for="loopSource in scope.column.params.dataSource"-->
134
- <!-- :key="loopSource.value"-->
135
- <!-- :value="loopSource.value"-->
136
- <!-- >{{ loopSource.caption }}</a-select-option-->
137
- <!-- >-->
138
- <!-- </a-select>-->
139
- <br>
140
- <a-button @click="filterConfirm(scope.column)">确认</a-button>
141
- </div>
142
- </template>
143
- <template #datetime_filter="scope">
144
- <div class="interceptor-class">
145
- <div
146
- :class="scope.column.field + '_filter_' + $index"
147
- v-for="(loopFilterValue, $index) in scope.column.filters[0].data
93
+ :key="$index"
94
+ >
95
+ <a-input-number
96
+ :precision="0"
97
+ size="small"
98
+ v-model="loopFilterValue.value[0]"
99
+ @keyup.enter.native="filterConfirm(scope.column)"
100
+ />~
101
+ <a-input-number
102
+ :precision="0"
103
+ size="small"
104
+ v-model="loopFilterValue.value[1]"
105
+ @keyup.enter.native="filterConfirm(scope.column)"
106
+ />
107
+ </div>
108
+ <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
109
+ <a-button @click="filterConfirm(scope.column)">确认</a-button>
110
+ </div>
111
+ </template>
112
+ <template #select_filter="scope">
113
+ <div class="interceptor-class">
114
+ <a-checkbox-group
115
+ v-model="scope.column.filters[0].data.displayValues"
116
+ :style="{
117
+ display: 'flex',
118
+ flexWrap: 'wrap',
119
+ justifyContent: 'left',
120
+ alignItems: 'center',
121
+ maxHeight: '150px',
122
+ overflow: 'auto',
123
+ maxWidth: '100px',
124
+ }"
125
+ @keyup.enter.native="filterConfirm(scope.column)"
126
+ >
127
+ <br />
128
+ <a-checkbox
129
+ v-for="loopSource in scope.column.params.dataSource"
130
+ :key="loopSource.value"
131
+ :value="loopSource.value"
132
+ style="margin: 5px 0"
133
+ >{{ loopSource.caption }}
134
+ </a-checkbox>
135
+ </a-checkbox-group>
136
+ <!-- <a-select-->
137
+ <!-- v-model="scope.column.filters[0].data.displayValues"-->
138
+ <!-- mode="multiple"-->
139
+ <!-- allowClear-->
140
+ <!-- style="width: 300px;"-->
141
+ <!-- placeholder="筛选条件"-->
142
+ <!-- showArrow-->
143
+ <!-- >-->
144
+ <!-- <a-select-option-->
145
+ <!-- v-for="loopSource in scope.column.params.dataSource"-->
146
+ <!-- :key="loopSource.value"-->
147
+ <!-- :value="loopSource.value"-->
148
+ <!-- >{{ loopSource.caption }}</a-select-option-->
149
+ <!-- >-->
150
+ <!-- </a-select>-->
151
+ <br />
152
+ <a-button @click="filterConfirm(scope.column)">确认</a-button>
153
+ </div>
154
+ </template>
155
+ <template #datetime_filter="scope">
156
+ <div class="interceptor-class">
157
+ <div
158
+ :class="scope.column.field + '_filter_' + $index"
159
+ v-for="(loopFilterValue, $index) in scope.column.filters[0].data
148
160
  .displayValues"
149
- :key="$index"
150
- >
151
- <a-date-picker
152
- valueFormat="YYYY-MM-DD HH:mm:ss"
153
- format="YYYY-MM-DD HH:mm:ss"
154
- :show-time="{
161
+ :key="$index"
162
+ >
163
+ <a-date-picker
164
+ valueFormat="YYYY-MM-DD HH:mm:ss"
165
+ format="YYYY-MM-DD HH:mm:ss"
166
+ :show-time="{
155
167
  defaultValue: moment(
156
168
  '2000-01-01 00:00:00',
157
169
  'YYYY-MM-DD HH:mm:ss'
158
170
  ),
159
171
  }"
160
- placeholder="开始时间"
161
- v-model="loopFilterValue.value[0]"
162
- @keyup.enter.native="filterConfirm(scope.column)"
163
- />
164
- <a-date-picker
165
- valueFormat="YYYY-MM-DD HH:mm:ss"
166
- format="YYYY-MM-DD HH:mm:ss"
167
- :show-time="{
172
+ placeholder="开始时间"
173
+ v-model="loopFilterValue.value[0]"
174
+ @keyup.enter.native="filterConfirm(scope.column)"
175
+ />
176
+ <a-date-picker
177
+ valueFormat="YYYY-MM-DD HH:mm:ss"
178
+ format="YYYY-MM-DD HH:mm:ss"
179
+ :show-time="{
168
180
  defaultValue: moment(
169
181
  '2000-01-01 23:59:59',
170
182
  'YYYY-MM-DD HH:mm:ss'
171
183
  ),
172
184
  }"
173
- placeholder="结束时间"
174
- v-model="loopFilterValue.value[1]"
175
- @keyup.enter.native="filterConfirm(scope.column)"
176
- />
177
- </div>
178
- <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
179
- <a-button @click="filterConfirm(scope.column)">确认</a-button>
180
- </div>
181
- </template>
182
- <template #date_filter="scope">
183
- <div class="interceptor-class">
184
- <div
185
- :class="scope.column.field + '_filter_' + $index"
186
- v-for="(loopFilterValue, $index) in scope.column.filters[0].data
185
+ placeholder="结束时间"
186
+ v-model="loopFilterValue.value[1]"
187
+ @keyup.enter.native="filterConfirm(scope.column)"
188
+ />
189
+ </div>
190
+ <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
191
+ <a-button @click="filterConfirm(scope.column)">确认</a-button>
192
+ </div>
193
+ </template>
194
+ <template #date_filter="scope">
195
+ <div class="interceptor-class">
196
+ <div
197
+ :class="scope.column.field + '_filter_' + $index"
198
+ v-for="(loopFilterValue, $index) in scope.column.filters[0].data
187
199
  .displayValues"
188
- :key="$index"
189
- >
190
- <a-range-picker v-model:value="loopFilterValue.value"
191
- valueFormat="YYYY-MM-DD"
192
- format="YYYY-MM-DD"
193
- @keyup.enter.native="filterConfirm(scope.column)"
194
-
195
- />
196
- </div>
197
- <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
198
- <a-button @click="filterConfirm(scope.column)">确认</a-button>
199
- </div>
200
- </template>
200
+ :key="$index"
201
+ >
202
+ <a-range-picker
203
+ v-model:value="loopFilterValue.value"
204
+ valueFormat="YYYY-MM-DD"
205
+ format="YYYY-MM-DD"
206
+ @keyup.enter.native="filterConfirm(scope.column)"
207
+ />
208
+ </div>
209
+ <a-button @click="filterAddExp(scope.column)">添加条件</a-button>
210
+ <a-button @click="filterConfirm(scope.column)">确认</a-button>
211
+ </div>
212
+ </template>
201
213
  </vxe-grid>
202
214
  </div>
203
215
  </template>
204
216
  <script>
205
- import Sortable from 'sortablejs'
206
- import VXETable from 'vxe-table'
217
+ import Sortable from "sortablejs";
218
+ import VXETable from "vxe-table";
207
219
  import XEUtils from "xe-utils";
208
220
  import { controlType } from "../../utils/enum";
209
221
 
210
222
  export default {
211
- props:{
212
- userDefineColumns: {
213
- type: Array,
214
- default: function () {
215
- return [];
216
- },
223
+ props: {
224
+ userDefineColumns: {
225
+ type: Array,
226
+ default: function () {
227
+ return [];
217
228
  },
229
+ },
218
230
  },
219
231
  created() {
220
- this.adjustUserDefineColumns = this.userDefineColumns
221
- this.adjustUserDefineColumns.forEach(item => {
222
- if (item.visible) {
223
- this.$set(item, 'show', true)
224
- } else {
225
- this.$set(item, 'show', false)
226
- }
227
- })
228
- this.adjustGridOptions.columns = []
229
- this.adjustUserDefineColumns.forEach(item => {
230
- if (item.field === 'operation') {
231
- return
232
+ this.adjustUserDefineColumns = this.userDefineColumns;
233
+ this.adjustUserDefineColumns.forEach((item) => {
234
+ if (item.visible) {
235
+ this.$set(item, "show", true);
236
+ } else {
237
+ this.$set(item, "show", false);
238
+ }
239
+ });
240
+ this.adjustGridOptions.columns = [];
241
+ this.adjustUserDefineColumns.forEach((item) => {
242
+ if (item.field === "operation") {
243
+ return;
232
244
  }
233
245
 
234
246
  const column = {
235
- field: item.field,
236
- title: item.title,
237
- slots: {
238
- header: 'checkbox',
239
- filter: item.slots.filter
240
- },
241
- params: item.params,
242
- width: item.width,
243
- filters: item.filters,
244
- sortable: item.sortable,
245
- filterResetMethod:({ options, column })=>{
246
- column.filters = [
247
- {
248
- data: {
249
- bindingValues: [],
250
- displayValues: []
251
- }
252
- }
253
- ]
254
- }
255
- }
256
- this.$set(column.params,'show',item.show)
257
- this.adjustGridOptions.columns.push(column)
258
- })
247
+ field: item.field,
248
+ title: item.title,
249
+ slots: {
250
+ header: "checkbox",
251
+ filter: item.slots.filter,
252
+ },
253
+ params: item.params,
254
+ width: item.width,
255
+ filters: item.filters,
256
+ sortable: item.sortable,
257
+ filterResetMethod: ({ options, column }) => {
258
+ column.filters = [
259
+ {
260
+ data: {
261
+ bindingValues: [],
262
+ displayValues: [],
263
+ },
264
+ },
265
+ ];
266
+ },
267
+ };
268
+ this.$set(column.params, "show", item.show);
269
+ this.adjustGridOptions.columns.push(column);
270
+ });
259
271
  },
260
272
  mounted() {
261
- this.$refs.adjustGrid.getTableColumn().collectColumn.forEach(item => {
262
- const find = XEUtils.find(this.adjustUserDefineColumns, innerItem => item.field === innerItem.field)
263
- item.order = find.order
264
- })
265
- this.columnDrop(this.adjustUserDefineColumns)
273
+ this.$refs.adjustGrid.getTableColumn().collectColumn.forEach((item) => {
274
+ const find = XEUtils.find(
275
+ this.adjustUserDefineColumns,
276
+ (innerItem) => item.field === innerItem.field
277
+ );
278
+ item.order = find.order;
279
+ });
280
+ this.columnDrop(this.adjustUserDefineColumns);
266
281
  },
267
282
  beforeDestroy() {
268
283
  if (this.sortable) {
269
- this.sortable.destroy()
284
+ this.sortable.destroy();
270
285
  }
271
286
  },
272
287
  data() {
@@ -284,154 +299,166 @@ export default {
284
299
  ],
285
300
  ],
286
301
  },
287
- enabled:true
302
+ enabled: true,
288
303
  },
289
304
  adjustGridLoading: false,
290
305
  adjustUserDefineColumns: null,
291
306
  adjustGridOptions: {
292
307
  border: true,
293
- class: 'sortable-column-demo',
308
+ class: "sortable-column-demo",
294
309
  columnConfig: {
295
310
  useKey: true,
296
- resizable: true
311
+ resizable: true,
297
312
  },
298
313
  scrollX: {
299
- enabled: false
314
+ enabled: false,
300
315
  },
301
316
  columns: [],
302
- data: []
303
- }
304
- }
317
+ data: [],
318
+ },
319
+ };
305
320
  },
306
321
 
307
322
  methods: {
308
323
  changeCheckbox(val) {
309
- const find = XEUtils.find(this.$refs.adjustGrid.getTableColumn().collectColumn,item=>item.field ===val.field)
310
- find.visible = val.params.show
324
+ const find = XEUtils.find(
325
+ this.$refs.adjustGrid.getTableColumn().collectColumn,
326
+ (item) => item.field === val.field
327
+ );
328
+ find.visible = val.params.show;
311
329
  },
312
330
  //右键菜单事件
313
331
  contextMenuClickEvent({ menu, row, column }) {
314
332
  const $table = this.$refs.adjustGrid;
315
333
  switch (menu.code) {
316
- case 'clearFilter':
334
+ case "clearFilter":
317
335
  const filterList = this.$refs.adjustGrid.getCheckedFilters();
318
336
  filterList.forEach((col) => {
319
- this.getTableColumn().forEach(column => {
320
- if(column.field==col.property){
321
- this.$set(column.filters[0].data,'displayValues',[])
322
- this.$set(column.filters[0].data,'bindingValues',[])
323
- this.$refs.adjustGrid.clearFilter(column)
324
- }
325
- });
326
- //这个col和 internalColumn之间没有绑定上
327
- col.column.filters = [
328
- {
329
- data: {
330
- bindingValues: [],
331
- displayValues: []
332
- }
333
- }
334
- ]
337
+ this.getTableColumn().forEach((column) => {
338
+ if (column.field == col.property) {
339
+ this.$set(column.filters[0].data, "displayValues", []);
340
+ this.$set(column.filters[0].data, "bindingValues", []);
341
+ this.$refs.adjustGrid.clearFilter(column);
342
+ }
343
+ });
344
+ //这个col和 internalColumn之间没有绑定上
345
+ col.column.filters = [
346
+ {
347
+ data: {
348
+ bindingValues: [],
349
+ displayValues: [],
350
+ },
351
+ },
352
+ ];
335
353
  });
336
354
  // this.$refs.adjustGrid.clearFilter()
337
355
  // .then(res=>{
338
356
  // console.log('a',this.$refs.adjustGrid.getCheckedFilters())
339
357
  // console.log('b',this.getTableColumn())
340
358
  // })
341
- // XEUtils.clear(this.filterExpression)
342
- // vm.$emit("filterChange");
343
- break
359
+ // XEUtils.clear(this.filterExpression)
360
+ // vm.$emit("filterChange");
361
+ break;
344
362
  }
345
363
  },
346
364
  resizableChange($rowIndex) {
347
- this.$refs.adjustGrid.getTableColumn().collectColumn.forEach(item => {
365
+ this.$refs.adjustGrid.getTableColumn().collectColumn.forEach((item) => {
348
366
  if (item.field === $rowIndex.column.field) {
349
- item.width = $rowIndex.column.resizeWidth
367
+ item.width = $rowIndex.column.resizeWidth;
350
368
  }
351
- })
369
+ });
352
370
  },
353
371
  columnDrop() {
354
372
  this.$nextTick(() => {
355
- this.adjustGridLoading = true
356
- const $table = this.$refs.adjustGrid
373
+ this.adjustGridLoading = true;
374
+ const $table = this.$refs.adjustGrid;
357
375
  this.sortable = Sortable.create(
358
376
  $table.$el.querySelector(
359
- '.body--wrapper>.vxe-table--header .vxe-header--row'
377
+ ".body--wrapper>.vxe-table--header .vxe-header--row"
360
378
  ),
361
379
  {
362
- handle: '.vxe-header--column',
380
+ handle: ".vxe-header--column",
363
381
  onEnd: ({ item, newIndex, oldIndex }) => {
364
- const { fullColumn, tableColumn } = $table.getTableColumn()
365
- const targetThElem = item
366
- const wrapperElem = targetThElem.parentNode
367
- const newColumn = fullColumn[newIndex]
382
+ const { fullColumn, tableColumn } = $table.getTableColumn();
383
+ const targetThElem = item;
384
+ const wrapperElem = targetThElem.parentNode;
385
+ const newColumn = fullColumn[newIndex];
368
386
  if (newColumn.fixed) {
369
- const oldThElem = wrapperElem.children[oldIndex]
387
+ const oldThElem = wrapperElem.children[oldIndex];
370
388
  // 错误的移动
371
389
  if (newIndex > oldIndex) {
372
- wrapperElem.insertBefore(targetThElem, oldThElem)
390
+ wrapperElem.insertBefore(targetThElem, oldThElem);
373
391
  } else {
374
392
  wrapperElem.insertBefore(
375
393
  targetThElem,
376
394
  oldThElem ? oldThElem.nextElementSibling : oldThElem
377
- )
395
+ );
378
396
  }
379
397
  VXETable.modal.message({
380
- content: '固定列不允许拖动,即将还原操作!',
381
- status: 'error'
382
- })
383
- return
398
+ content: "固定列不允许拖动,即将还原操作!",
399
+ status: "error",
400
+ });
401
+ return;
384
402
  }
385
403
  // 获取列索引 columnIndex > fullColumn
386
404
  const oldColumnIndex = $table.getColumnIndex(
387
405
  tableColumn[oldIndex]
388
- )
406
+ );
389
407
  const newColumnIndex = $table.getColumnIndex(
390
408
  tableColumn[newIndex]
391
- )
409
+ );
392
410
  // 移动到目标列
393
- const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
394
- fullColumn.splice(newColumnIndex, 0, currRow)
395
- $table.loadColumn(fullColumn)
396
- this.adjustUserDefineColumns = fullColumn
397
- }
411
+ const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
412
+ fullColumn.splice(newColumnIndex, 0, currRow);
413
+ $table.loadColumn(fullColumn);
414
+ this.adjustUserDefineColumns = fullColumn;
415
+ },
398
416
  }
399
- )
400
- this.adjustGridLoading = false
401
- })
417
+ );
418
+ this.adjustGridLoading = false;
419
+ });
402
420
  },
403
421
  filterAddExp(colInfo) {
404
- colInfo.filters[0].data.displayValues.push({
405
- value: [null, null],
406
- });
422
+ colInfo.filters[0].data.displayValues.push({
423
+ value: [null, null],
424
+ });
407
425
  },
408
426
  filterConfirm(colInfo) {
409
- let col = this.adjustUserDefineColumns.find(x => x.field === colInfo.property)
410
- this.$set(col.filters[0].data, 'bindingValues', [])
411
- colInfo.filters[0].data.bindingValues = [];
412
- XEUtils.arrayEach(colInfo.filters[0].data.displayValues, (item) => {
413
- if (colInfo.params.controlType === controlType.select) {
414
- colInfo.filters[0].data.bindingValues.push(item);
415
- this.$set(col.filters[0].data, 'bindingValues', colInfo.filters[0].data.bindingValues)
416
- } else {
417
- if (item.value[0] || item.value[1]) {
418
- colInfo.filters[0].data.bindingValues.push(item);
419
- this.$set(col.filters[0].data, 'bindingValues', colInfo.filters[0].data.bindingValues)
420
- }
421
- }
422
- });
423
- colInfo.filters[0].checked =
424
- colInfo.filters[0].data.bindingValues.length > 0;
425
- this.$refs.adjustGrid.closeFilter()
427
+ let col = this.adjustUserDefineColumns.find(
428
+ (x) => x.field === colInfo.property
429
+ );
430
+ this.$set(col.filters[0].data, "bindingValues", []);
431
+ colInfo.filters[0].data.bindingValues = [];
432
+ XEUtils.arrayEach(colInfo.filters[0].data.displayValues, (item) => {
433
+ if (colInfo.params.controlType === controlType.select) {
434
+ colInfo.filters[0].data.bindingValues.push(item);
435
+ this.$set(
436
+ col.filters[0].data,
437
+ "bindingValues",
438
+ colInfo.filters[0].data.bindingValues
439
+ );
440
+ } else {
441
+ if (item.value[0] || item.value[1]) {
442
+ colInfo.filters[0].data.bindingValues.push(item);
443
+ this.$set(
444
+ col.filters[0].data,
445
+ "bindingValues",
446
+ colInfo.filters[0].data.bindingValues
447
+ );
448
+ }
449
+ }
450
+ });
451
+ colInfo.filters[0].checked =
452
+ colInfo.filters[0].data.bindingValues.length > 0;
453
+ this.$refs.adjustGrid.closeFilter();
426
454
  },
427
455
  getTableColumn() {
428
- return this.$refs.adjustGrid.getTableColumn().collectColumn
456
+ return this.$refs.adjustGrid.getTableColumn().collectColumn;
429
457
  },
430
-
431
- }
432
- }
458
+ },
459
+ };
433
460
  </script>
434
- <style scoped>
461
+ <style scoped lang="less">
435
462
  .sortable-column-demo .vxe-header--row .vxe-header--column.sortable-ghost,
436
463
  .sortable-column-demo .vxe-header--row .vxe-header--column.sortable-chosen {
437
464
  background-color: #dfecfb;
@@ -441,15 +468,15 @@ export default {
441
468
  }
442
469
 
443
470
  .interceptor-class {
444
- padding: 10px;
445
- ::v-deep .ant-btn {
446
- margin: 10px 10px 0;
447
- }
448
- ::v-deep .ant-input {
449
- margin-bottom: 5px;
450
- }
451
- ::v-deep .ant-calendar-picker {
452
- margin: 0 5px;
453
- }
471
+ padding: 10px;
472
+ ::v-deep .ant-btn {
473
+ margin: 10px 10px 0;
474
+ }
475
+ ::v-deep .ant-input {
476
+ margin-bottom: 5px;
477
+ }
478
+ ::v-deep .ant-calendar-picker {
479
+ margin: 0 5px;
480
+ }
454
481
  }
455
482
  </style>
@@ -0,0 +1,8 @@
1
+ // 导入组件,组件必须声明 name
2
+ import LeaveAMessage from './src/index.vue';
3
+ // 为组件提供 install 安装方法,供按需引入
4
+ LeaveAMessage.install = function(Vue) {
5
+ Vue.component(LeaveAMessage.name, LeaveAMessage);
6
+ };
7
+ // 默认导出组件
8
+ export default LeaveAMessage;
@@ -0,0 +1,386 @@
1
+ <template>
2
+ <div class="liu-yan" style="background-color: #eaeef1">
3
+ <div class="input-box">
4
+ <!-- :auto-size="{ minRows: 2, maxRows: 2 }" -->
5
+ <a-textarea auto-size placeholder="写些什么..." v-model:value="remark" />
6
+ <a-upload
7
+ list-type="picture"
8
+ :headers="uploadHeaders"
9
+ :action="uploadData.picAction"
10
+ :data="uploadData"
11
+ :before-upload="beforeAvatarUpload"
12
+ @change="handleAvatarSuccess"
13
+ :file-list="fileList"
14
+ style="padding-top: 10px"
15
+ >
16
+ <a-icon
17
+ style="font-size: 16px; cursor: pointer; margin: 5px 10px"
18
+ type="paper-clip"
19
+ />
20
+ </a-upload>
21
+ <div style="display: flex; justify-content: flex-end">
22
+ <a-button @click="addMsgRemark">发送</a-button>
23
+ </div>
24
+ </div>
25
+ <div class="list" :style="{ height: listHeight - 101 + 'px' }">
26
+ <a-list
27
+ v-if="remarkData.length > 0"
28
+ item-layout="horizontal"
29
+ :data-source="remarkData"
30
+ style="box-shadow: 3px 3px 6px #cad1d7"
31
+ >
32
+ <a-list-item
33
+ slot="renderItem"
34
+ slot-scope="item, index"
35
+ :style="{
36
+ borderBottom: item.type === 'date' ? '0' : '1px solid #ddd',
37
+ backgroundColor: item.type === 'date' ? '#fff' : '#fff',
38
+ }"
39
+ >
40
+ <template v-if="item.type !== 'date'">
41
+ <a-popconfirm
42
+ placement="topRight"
43
+ title="确认删除当前备注吗?"
44
+ ok-text="确认"
45
+ cancel-text="取消"
46
+ @confirm="delMsgRemark(item)"
47
+ >
48
+ <div v-show="userId === item.createUserId" class="close-icon">
49
+ <a-icon type="close" />
50
+ </div>
51
+ </a-popconfirm>
52
+ <a-comment :author="item.createUserName" :avatar="item.avatar">
53
+ <!-- <template slot="actions">
54
+ <span v-for="(action,index) in item.actions" :key="index">{{ action }}</span>
55
+ </template> -->
56
+ <template slot="content">
57
+ <div style="margin-bottom: 5px">
58
+ {{ item.body }}
59
+ </div>
60
+ <div
61
+ v-if="item.objectCommentAttachDtos.length > 0"
62
+ style="display: flex; flex-wrap: wrap"
63
+ >
64
+ <div
65
+ v-for="(item, index) in item.objectCommentAttachDtos"
66
+ :key="index"
67
+ class="msg-content"
68
+ @click="downloadFile(item)"
69
+ >
70
+ <div class="download-icon">
71
+ <a-icon
72
+ type="vertical-align-bottom"
73
+ style="font-size: 30px"
74
+ />
75
+ </div>
76
+ <a-icon
77
+ type="file-text"
78
+ style="font-size: 25px; margin-right: 5px"
79
+ />
80
+ <span class="file-title">{{ item.attachName }}</span>
81
+ </div>
82
+ </div>
83
+ </template>
84
+ <a-tooltip slot="datetime" :title="item.createTime">
85
+ <span>{{ item.fromNowTime }}</span>
86
+ </a-tooltip>
87
+ </a-comment>
88
+ </template>
89
+ <template v-else>
90
+ <a-divider>{{ item.createTime }}</a-divider>
91
+ </template>
92
+ </a-list-item>
93
+ </a-list>
94
+ <div v-else></div>
95
+ </div>
96
+ </div>
97
+ </template>
98
+
99
+ <script>
100
+ import moment from "moment";
101
+ import { notification } from "ant-design-vue";
102
+ import {
103
+ attachGetAttachUrlApi,
104
+ readObjectCommentApi,
105
+ searchObjectCommentApi,
106
+ addObjectCommentApi,
107
+ deleteObjectCommentApi,
108
+ } from "../../utils/api";
109
+ export default {
110
+ name: "LeaveAMessage",
111
+ props: {
112
+ listHeight: {
113
+ type: Number,
114
+ },
115
+ limitSize: {
116
+ // 限制上传大小
117
+ type: Number,
118
+ default: 5,
119
+ },
120
+ limitType: {
121
+ // 限制上传类型
122
+ type: Array,
123
+ default: () => {
124
+ return [];
125
+ },
126
+ },
127
+ resId: {
128
+ type: String,
129
+ },
130
+ picType: {
131
+ type: String,
132
+ default: "cust",
133
+ },
134
+ dataName: {
135
+ type: String,
136
+ },
137
+ // formRow: {
138
+ // type: Object,
139
+ // default: () => {
140
+ // return {};
141
+ // },
142
+ // },
143
+ },
144
+ watch: {
145
+ resId: {
146
+ handler: function (newVal) {
147
+ this.uploadData.resId = newVal;
148
+ },
149
+ },
150
+ },
151
+ created() {
152
+ let viewDatas =
153
+ this.$store.getters.moduleViewInfo[this.$route.meta.moduleCode];
154
+ this.objectName = viewDatas.objectName;
155
+ this.userId = this.$store.getters.userId;
156
+ },
157
+ mounted() {
158
+ this.uploadHeaders.Authorization = `Bearer ${this.$store.getters.token}`;
159
+ this.uploadData.picType = this.picType;
160
+ this.uploadData.resId = this.resId;
161
+ this.internalServiceUrl = attachGetAttachUrlApi();
162
+ this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
163
+ this.getMsgRemarkData();
164
+ },
165
+ data() {
166
+ return {
167
+ userId: null,
168
+ fileList: [],
169
+ remarkData: [],
170
+ uploadData: {
171
+ picType: "",
172
+ picAction: "",
173
+ resId: "",
174
+ },
175
+ uploadHeaders: {
176
+ Authorization: null,
177
+ },
178
+ remark: "",
179
+ attachment: [],
180
+ objectName: "",
181
+ };
182
+ },
183
+ methods: {
184
+ beforeAvatarUpload(file) {
185
+ // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
186
+ if (file.size / 1024 / 1024 > this.limitSize) {
187
+ notification.error({
188
+ message: "错误",
189
+ description: "上传图片大小不能超过 " + this.limitSize + "MB!",
190
+ });
191
+ }
192
+ if (this.limitType.length > 0 && !this.limitType[file.type]) {
193
+ notification.error({
194
+ message: "错误",
195
+ description: "上传附件格式错误!",
196
+ });
197
+ }
198
+ return true;
199
+ },
200
+ handleAvatarSuccess(info) {
201
+ this.fileList = info.fileList;
202
+ if (info.file.status == "done") {
203
+ this.attachment.push(info.file.response.content.id);
204
+ // this.$emit("add", this.dataName, info.file.response.content);
205
+ }
206
+ },
207
+ getMsgRemarkData() {
208
+ let postData = {
209
+ begin: 1,
210
+ size: 0,
211
+ expression: {
212
+ expressions: [
213
+ {
214
+ field: "objectName",
215
+ operator: "EQ",
216
+ value: this.objectName,
217
+ },
218
+ ],
219
+ operator: "and",
220
+ },
221
+ sorts: [['createTime', 'desc']]
222
+ };
223
+ searchObjectCommentApi(postData).then((res) => {
224
+ let tmp = [];
225
+ res.content.forEach((item) => {
226
+ let flag = tmp.findIndex((titem) => {
227
+ return (
228
+ titem.createTime ===
229
+ moment(item.createTime).format("YYYY年MM月DD")
230
+ );
231
+ });
232
+ if (flag < 0) {
233
+ tmp.push({
234
+ type: "date",
235
+ createTime: moment(item.createTime).format("YYYY年MM月DD"),
236
+ });
237
+ }
238
+ item["avatar"] =
239
+ "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png";
240
+ item["fromNowTime"] = moment(item.createTime).fromNow();
241
+ tmp.push(item);
242
+ });
243
+ this.remarkData = tmp;
244
+ });
245
+ },
246
+ downloadFile(val) {
247
+ window.open(
248
+ this.internalServiceUrl +
249
+ "/DownAttachFile/" +
250
+ val.msgAttachId +
251
+ `?accessToken=${this.$store.getters.token}`
252
+ );
253
+ },
254
+ addMsgRemark() {
255
+ if (this.remark === "" && this.attachment.length < 1) {
256
+ return;
257
+ } else {
258
+ let postData = {
259
+ resId: this.resId,
260
+ objectName: this.objectName,
261
+ body: this.remark,
262
+ objectCommentAttachIds: this.attachment,
263
+ };
264
+ console.log(this.fileList);
265
+ addObjectCommentApi(postData).then((res) => {
266
+ this.remark = "";
267
+ this.attachment = [];
268
+ this.fileList = [];
269
+ this.getMsgRemarkData();
270
+ });
271
+ }
272
+ },
273
+ delMsgRemark(val) {
274
+ deleteObjectCommentApi({
275
+ keyIds: [val.id],
276
+ }).then((res) => {
277
+ this.getMsgRemarkData();
278
+ });
279
+ },
280
+ },
281
+ };
282
+ </script>
283
+
284
+ <style lang="less" scoped>
285
+ ::v-deep(.ant-upload-list-picture .ant-upload-list-item) {
286
+ max-width: 185px;
287
+ min-width: 185px;
288
+ margin-right: 10px;
289
+ }
290
+ ::v-deep(.ant-upload-list-picture .ant-upload-list-item-name) {
291
+ padding-right: 24px !important;
292
+ }
293
+ ::v-deep(.ant-upload-list) {
294
+ display: flex;
295
+ flex-wrap: wrap;
296
+ }
297
+ ::v-deep(.ant-list-item) {
298
+ padding: 12px 10px;
299
+ position: relative;
300
+ }
301
+ .list {
302
+ padding: 15px 15px;
303
+ overflow: auto;
304
+ .close-icon {
305
+ position: absolute;
306
+ top: 30%;
307
+ right: 5%;
308
+ cursor: pointer;
309
+ }
310
+ }
311
+ /*滚动条整体部分*/
312
+ .list::-webkit-scrollbar {
313
+ width: 5px;
314
+ height: 5px;
315
+ z-index: 10;
316
+ }
317
+ /*滚动条的轨道*/
318
+ .list::-webkit-scrollbar-track {
319
+ background-color: #ffffff;
320
+ z-index: 10;
321
+ }
322
+ /*滚动条里面的小方块,能向上向下移动*/
323
+ .list::-webkit-scrollbar-thumb {
324
+ background-color: #bfbfbf;
325
+ border-radius: 5px;
326
+ border: 1px solid #f1f1f1;
327
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
328
+ z-index: 10;
329
+ }
330
+ .list::-webkit-scrollbar-thumb:hover {
331
+ background-color: #a8a8a8;
332
+ z-index: 10;
333
+ }
334
+ .list::-webkit-scrollbar-thumb:active {
335
+ background-color: #787878;
336
+ z-index: 10;
337
+ }
338
+ /*边角,即两个滚动条的交汇处*/
339
+ .list::-webkit-scrollbar-corner {
340
+ background-color: #ffffff;
341
+ z-index: 10;
342
+ }
343
+ ::v-deep .vxe-modal--wrapper .vxe-modal--content {
344
+ padding: 0;
345
+ }
346
+ .input-box {
347
+ background-color: #fff;
348
+ padding: 10px 10px 0;
349
+ min-height: 100px;
350
+ max-height: 100px;
351
+ }
352
+ .msg-content {
353
+ box-sizing: border-box;
354
+ max-height: 40px;
355
+ min-height: 40px;
356
+ max-width: 140px;
357
+ min-width: 140px;
358
+ display: flex;
359
+ align-items: center;
360
+ border-bottom: 1px solid #ccc;
361
+ background: #eee;
362
+ border-radius: 5px;
363
+ padding: 0 10px;
364
+ margin-right: 8px;
365
+ margin-bottom: 8px;
366
+ cursor: pointer;
367
+ position: relative;
368
+ }
369
+ .download-icon {
370
+ position: absolute;
371
+ line-height: 50%;
372
+ left: 45%;
373
+ opacity: 0;
374
+ }
375
+ .msg-content:hover {
376
+ background: #ccc;
377
+ }
378
+ .msg-content:hover .download-icon {
379
+ opacity: 1;
380
+ }
381
+ .file-title {
382
+ overflow: hidden; //超出的文本隐藏
383
+ text-overflow: ellipsis; //溢出用省略号显示
384
+ white-space: nowrap; // 默认不换行;
385
+ }
386
+ </style>
package/packages/index.js CHANGED
@@ -22,6 +22,7 @@ import BaseGantt from "./BaseGantt/index";
22
22
  import BaseKanbanEmpty from "./BaseKanbanEmpty/index";
23
23
  import BaseSearch from "./BaseSearch/index";
24
24
  import BaseButton from "./BaseButton/index";
25
+ import LeaveAMessage from "./LeaveAMessage/index";
25
26
 
26
27
  import store from './utils/store'
27
28
  import request from './utils/request'
@@ -33,7 +34,7 @@ const components = [
33
34
  BaseTextArea, BaseSelect, BaseSelectMulti, BaseTime, BasePagination,
34
35
  BaseNumberInput, BaseTool, BaseToolStatus, BasePulldown, BaseIntervalInput,
35
36
  BaseForm, BasePictureCard, BaseGrid, BasePrintPreview, BaseGantt,
36
- BaseKanbanEmpty, BaseSearch, BaseButton
37
+ BaseKanbanEmpty, BaseSearch, BaseButton,LeaveAMessage
37
38
  ];
38
39
  // 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
39
40
 
@@ -161,6 +162,7 @@ export {
161
162
  BaseKanbanEmpty,
162
163
  BaseSearch,
163
164
  BaseButton,
165
+ LeaveAMessage,
164
166
  store,
165
167
  request,
166
168
  }
@@ -43,4 +43,33 @@ export function licenseAuthorizeApi(data) {
43
43
  method: 'post',
44
44
  data: data
45
45
  })
46
+ }
47
+
48
+ export function readObjectCommentApi(data) {
49
+ return request({
50
+ url: store.getters.msgUrl + '/v1/objectComment/read',
51
+ method: 'post',
52
+ data: data
53
+ })
54
+ }
55
+ export function searchObjectCommentApi(data) {
56
+ return request({
57
+ url: store.getters.msgUrl + '/v1/objectComment/search',
58
+ method: 'post',
59
+ data: data
60
+ })
61
+ }
62
+ export function addObjectCommentApi(data) {
63
+ return request({
64
+ url: store.getters.msgUrl + '/v1/objectComment/add',
65
+ method: 'post',
66
+ data: data
67
+ })
68
+ }
69
+ export function deleteObjectCommentApi(data) {
70
+ return request({
71
+ url: store.getters.msgUrl + '/v1/objectComment/delete',
72
+ method: 'post',
73
+ data: data
74
+ })
46
75
  }