tianheng-ui 0.1.36 → 0.1.38
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/lib/theme-chalk/styles/feature.scss +9 -0
- package/lib/tianheng-ui.js +13 -13
- package/package.json +1 -1
- package/packages/Dialog/index.vue +4 -1
- package/packages/FormMaking/FormConfig.vue +3 -3
- package/packages/FormMaking/WidgetConfig.vue +317 -218
- package/packages/FormMaking/WidgetForm.vue +8 -0
- package/packages/FormMaking/WidgetTools.vue +3 -2
- package/packages/FormMaking/index.vue +246 -203
- package/packages/FormMaking/styles/index.scss +1 -1
- package/packages/TableMaking/WidgetTools.vue +3 -2
- package/packages/TableMaking/custom/config.js +14 -5
- package/packages/TableMaking/custom/items/actions/index-pc.vue +118 -0
- package/packages/TableMaking/custom/items/table/index-pc.vue +38 -13
- package/packages/TableMaking/generateTable.vue +206 -170
- package/packages/TableMaking/index.vue +5 -15
- package/packages/TableMaking/widgetConfig.vue +183 -80
- package/packages/TableMaking/widgetTable.vue +42 -4
|
@@ -1,49 +1,53 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="tabs">
|
|
2
|
+
<div class="tableWidgetConfig">
|
|
3
|
+
<div class="tabs ">
|
|
4
4
|
<div
|
|
5
5
|
v-for="(item, index) in tabsMenus"
|
|
6
6
|
:key="index"
|
|
7
7
|
class="tabs-item"
|
|
8
8
|
:class="{ 'tabs-item__active': activeTab.value === item.value }"
|
|
9
|
-
@click="
|
|
9
|
+
@click="activeTab = item"
|
|
10
10
|
>
|
|
11
11
|
{{ item.title }}
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
|
-
<div v-if="activeTab.value ===
|
|
15
|
-
<el-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
14
|
+
<div v-if="activeTab.value === 'field'" class="configItem fieldsView">
|
|
15
|
+
<el-collapse v-model="collapseValue">
|
|
16
|
+
<el-collapse-item title="查询字段" name="group-fields_search">
|
|
17
|
+
<el-checkbox
|
|
18
|
+
v-model="searchField.isCheckAll"
|
|
19
|
+
:indeterminate="searchField.isIndeterminate"
|
|
20
|
+
@change="val => handleCheckAllChange(val, 'searchField')"
|
|
21
|
+
>全选</el-checkbox
|
|
22
|
+
>
|
|
23
|
+
<el-checkbox
|
|
24
|
+
v-for="item in fields"
|
|
25
|
+
:label="item.prop"
|
|
26
|
+
:key="`searchField-${item.prop}-${item.isSearch}`"
|
|
27
|
+
:checked="item.isSearch"
|
|
28
|
+
@change="val => handleCheckboxChange(val, 'searchField', item)"
|
|
29
|
+
>{{ item.label }}</el-checkbox
|
|
30
|
+
>
|
|
31
|
+
</el-collapse-item>
|
|
32
|
+
<el-collapse-item title="列表字段" name="group-fields_list">
|
|
33
|
+
<el-checkbox
|
|
34
|
+
v-model="tableField.isCheckAll"
|
|
35
|
+
:indeterminate="tableField.isIndeterminate"
|
|
36
|
+
@change="val => handleCheckAllChange(val, 'tableField')"
|
|
37
|
+
>全选</el-checkbox
|
|
38
|
+
>
|
|
39
|
+
<el-checkbox
|
|
40
|
+
v-for="item in fields"
|
|
41
|
+
:label="item.prop"
|
|
42
|
+
:key="`tableField-${item.prop}-${item.isTable}`"
|
|
43
|
+
:checked="item.isTable"
|
|
44
|
+
@change="val => handleCheckboxChange(val, 'tableField', item)"
|
|
45
|
+
>{{ item.label }}</el-checkbox
|
|
46
|
+
>
|
|
47
|
+
</el-collapse-item>
|
|
48
|
+
</el-collapse>
|
|
45
49
|
</div>
|
|
46
|
-
<div v-if="activeTab.value ===
|
|
50
|
+
<div v-if="activeTab.value === 'table' && config.table" class="configItem">
|
|
47
51
|
<el-form
|
|
48
52
|
:model="config"
|
|
49
53
|
label-position="left"
|
|
@@ -57,7 +61,7 @@
|
|
|
57
61
|
<el-form-item required prop="table.fieldsType">
|
|
58
62
|
<el-tooltip
|
|
59
63
|
slot="label"
|
|
60
|
-
effect="
|
|
64
|
+
effect="light"
|
|
61
65
|
content="字段的配置方式"
|
|
62
66
|
placement="top"
|
|
63
67
|
>
|
|
@@ -72,7 +76,7 @@
|
|
|
72
76
|
><el-form-item required prop="table.mounted.api">
|
|
73
77
|
<el-tooltip
|
|
74
78
|
slot="label"
|
|
75
|
-
effect="
|
|
79
|
+
effect="light"
|
|
76
80
|
content="列表初始化完成后，调用该接口获取列表数据"
|
|
77
81
|
placement="top"
|
|
78
82
|
>
|
|
@@ -135,14 +139,73 @@
|
|
|
135
139
|
<el-form-item label="开启分页">
|
|
136
140
|
<el-switch v-model="config.table.pageInfo.show"> </el-switch>
|
|
137
141
|
</el-form-item>
|
|
138
|
-
<
|
|
139
|
-
<el-
|
|
140
|
-
<el-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
142
|
+
<template v-if="config.table.pageInfo.show">
|
|
143
|
+
<el-form-item label="初始页码">
|
|
144
|
+
<el-input-number
|
|
145
|
+
class="pageInfo-currentPage"
|
|
146
|
+
v-model="config.table.pageInfo.options.currentPage"
|
|
147
|
+
controls-position="right"
|
|
148
|
+
:min="1"
|
|
149
|
+
></el-input-number>
|
|
150
|
+
</el-form-item>
|
|
151
|
+
<el-form-item label="分页条数">
|
|
152
|
+
<el-radio-group
|
|
153
|
+
v-model="config.table.pageInfo.options.pageSize"
|
|
154
|
+
>
|
|
155
|
+
<el-radio-button
|
|
156
|
+
v-for="size in config.table.pageInfo.options.sizes"
|
|
157
|
+
:key="size"
|
|
158
|
+
:label="size"
|
|
159
|
+
>{{ size }}条</el-radio-button
|
|
160
|
+
>
|
|
161
|
+
</el-radio-group>
|
|
162
|
+
</el-form-item>
|
|
163
|
+
<el-form-item>
|
|
164
|
+
<el-tooltip slot="label" effect="light" placement="top">
|
|
165
|
+
<div slot="content">
|
|
166
|
+
<div>组件布局，子组件名用逗号分隔。</div>
|
|
167
|
+
<div v-for="item in pageInfoLayout" :key="item.value">
|
|
168
|
+
{{ item.value }} : {{ item.label }}
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
<span style="color: #409EFF;">组件布局</span>
|
|
172
|
+
</el-tooltip>
|
|
173
|
+
<el-input
|
|
174
|
+
v-model="config.table.pageInfo.options.layout"
|
|
175
|
+
type="textarea"
|
|
176
|
+
:rows="2"
|
|
177
|
+
placeholder="请输入"
|
|
178
|
+
></el-input>
|
|
179
|
+
</el-form-item>
|
|
180
|
+
<el-form-item label="对齐方式">
|
|
181
|
+
<el-radio-group v-model="config.table.pageInfo.style.align">
|
|
182
|
+
<el-radio-button
|
|
183
|
+
v-for="item in pageInfoAlign"
|
|
184
|
+
:key="item.value"
|
|
185
|
+
:label="item.value"
|
|
186
|
+
>{{ item.label }}</el-radio-button
|
|
187
|
+
>
|
|
188
|
+
</el-radio-group>
|
|
189
|
+
</el-form-item>
|
|
190
|
+
<el-form-item label="小型样式">
|
|
191
|
+
<el-switch v-model="config.table.pageInfo.style.small">
|
|
192
|
+
</el-switch>
|
|
193
|
+
</el-form-item>
|
|
194
|
+
<el-form-item label="背景色">
|
|
195
|
+
<el-switch v-model="config.table.pageInfo.style.background">
|
|
196
|
+
</el-switch>
|
|
197
|
+
</el-form-item>
|
|
198
|
+
<el-form-item label="是否禁用">
|
|
199
|
+
<el-switch v-model="config.table.pageInfo.style.disabled">
|
|
200
|
+
</el-switch>
|
|
201
|
+
</el-form-item>
|
|
202
|
+
<el-form-item label="一页隐藏">
|
|
203
|
+
<el-switch
|
|
204
|
+
v-model="config.table.pageInfo.style.hideOnSinglePage"
|
|
205
|
+
>
|
|
206
|
+
</el-switch>
|
|
207
|
+
</el-form-item>
|
|
208
|
+
</template>
|
|
146
209
|
</el-collapse-item>
|
|
147
210
|
<el-collapse-item title="提示语配置" name="group-hint">
|
|
148
211
|
<el-form-item label="空数据">
|
|
@@ -186,14 +249,27 @@
|
|
|
186
249
|
<i class="el-icon-set-up" @click="handleActionConfig(item)"></i>
|
|
187
250
|
</div>
|
|
188
251
|
</el-collapse-item>
|
|
252
|
+
</el-collapse>
|
|
253
|
+
</el-form>
|
|
254
|
+
</div>
|
|
255
|
+
<div v-if="activeTab.value === 'css' && config.table" class="configItem">
|
|
256
|
+
<el-form
|
|
257
|
+
:model="config"
|
|
258
|
+
label-position="left"
|
|
259
|
+
label-width="80px"
|
|
260
|
+
size="small"
|
|
261
|
+
:rules="formRules"
|
|
262
|
+
ref="formRef"
|
|
263
|
+
>
|
|
264
|
+
<el-collapse v-model="collapseValue">
|
|
189
265
|
<el-collapse-item name="group-style_table">
|
|
190
|
-
<el-tooltip slot="title" effect="
|
|
266
|
+
<el-tooltip slot="title" effect="light" placement="top">
|
|
191
267
|
<div slot="content">
|
|
192
268
|
<span>显示边框: border</span><br />
|
|
193
269
|
<span>高度: height</span><br />
|
|
194
270
|
<!-- <span>自定义: 可自定义填写css样式</span><br /> -->
|
|
195
271
|
</div>
|
|
196
|
-
<span style="color: #409EFF;">table
|
|
272
|
+
<span style="color: #409EFF;">table 样式（电脑端）</span>
|
|
197
273
|
</el-tooltip>
|
|
198
274
|
<el-form-item label="显示边框">
|
|
199
275
|
<el-switch v-model="config.table.style.table.border"> </el-switch>
|
|
@@ -201,7 +277,7 @@
|
|
|
201
277
|
<el-form-item>
|
|
202
278
|
<el-tooltip
|
|
203
279
|
slot="label"
|
|
204
|
-
effect="
|
|
280
|
+
effect="light"
|
|
205
281
|
content="Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。"
|
|
206
282
|
placement="top"
|
|
207
283
|
>
|
|
@@ -214,15 +290,35 @@
|
|
|
214
290
|
></el-input>
|
|
215
291
|
</el-form-item>
|
|
216
292
|
</el-collapse-item>
|
|
293
|
+
<el-collapse-item name="group-style_pageInfo">
|
|
294
|
+
<el-tooltip slot="title" effect="light" placement="top">
|
|
295
|
+
<div slot="content">
|
|
296
|
+
<span>外边框: margin</span><br />
|
|
297
|
+
<span>内边框: padding</span><br />
|
|
298
|
+
<span>自定义: 可自定义填写css样式</span><br />
|
|
299
|
+
</div>
|
|
300
|
+
<span style="color: #409EFF;">分页控件 样式（电脑端）</span>
|
|
301
|
+
</el-tooltip>
|
|
302
|
+
</el-collapse-item>
|
|
303
|
+
<el-collapse-item name="group-style_list">
|
|
304
|
+
<el-tooltip slot="title" effect="light" placement="top">
|
|
305
|
+
<div slot="content">
|
|
306
|
+
<span>外边框: margin</span><br />
|
|
307
|
+
<span>内边框: padding</span><br />
|
|
308
|
+
<span>自定义: 可自定义填写css样式</span><br />
|
|
309
|
+
</div>
|
|
310
|
+
<span style="color: #409EFF;">list 样式（移动端）</span>
|
|
311
|
+
</el-tooltip>
|
|
312
|
+
</el-collapse-item>
|
|
217
313
|
<el-collapse-item name="group-style_cell">
|
|
218
|
-
<el-tooltip slot="title" effect="
|
|
314
|
+
<el-tooltip slot="title" effect="light" placement="top">
|
|
219
315
|
<div slot="content">
|
|
220
316
|
<span>外边框: margin</span><br />
|
|
221
317
|
<span>内边框: padding</span><br />
|
|
222
318
|
<span>分割线: border-bottom</span><br />
|
|
223
319
|
<span>自定义: 可自定义填写css样式</span><br />
|
|
224
320
|
</div>
|
|
225
|
-
<span style="color: #409EFF;">cell
|
|
321
|
+
<span style="color: #409EFF;">cell 样式（移动端）</span>
|
|
226
322
|
</el-tooltip>
|
|
227
323
|
<el-form-item label="外边距">
|
|
228
324
|
<el-input
|
|
@@ -256,7 +352,7 @@
|
|
|
256
352
|
</el-form-item>
|
|
257
353
|
</el-collapse-item>
|
|
258
354
|
<el-collapse-item name="group-style_title">
|
|
259
|
-
<el-tooltip slot="title" effect="
|
|
355
|
+
<el-tooltip slot="title" effect="light" placement="top">
|
|
260
356
|
<div slot="content">
|
|
261
357
|
<span>外边框: margin</span><br />
|
|
262
358
|
<span>内边框: padding</span><br />
|
|
@@ -265,7 +361,7 @@
|
|
|
265
361
|
<span>颜色: color</span><br />
|
|
266
362
|
<span>自定义: 可自定义填写css样式</span><br />
|
|
267
363
|
</div>
|
|
268
|
-
<span style="color: #409EFF;">title
|
|
364
|
+
<span style="color: #409EFF;">title 样式（移动端）</span>
|
|
269
365
|
</el-tooltip>
|
|
270
366
|
<el-form-item label="外边距">
|
|
271
367
|
<el-input
|
|
@@ -313,7 +409,7 @@
|
|
|
313
409
|
</el-form-item>
|
|
314
410
|
</el-collapse-item>
|
|
315
411
|
<el-collapse-item name="group-style_value">
|
|
316
|
-
<el-tooltip slot="title" effect="
|
|
412
|
+
<el-tooltip slot="title" effect="light" placement="top">
|
|
317
413
|
<div slot="content">
|
|
318
414
|
<span>外边框: margin</span><br />
|
|
319
415
|
<span>内边框: padding</span><br />
|
|
@@ -322,7 +418,7 @@
|
|
|
322
418
|
<span>颜色: color</span><br />
|
|
323
419
|
<span>自定义: 可自定义填写css样式</span><br />
|
|
324
420
|
</div>
|
|
325
|
-
<span style="color: #409EFF;">value
|
|
421
|
+
<span style="color: #409EFF;">value 样式（移动端）</span>
|
|
326
422
|
</el-tooltip>
|
|
327
423
|
<el-form-item label="外边距">
|
|
328
424
|
<el-input
|
|
@@ -443,7 +539,7 @@
|
|
|
443
539
|
<el-form-item>
|
|
444
540
|
<el-tooltip
|
|
445
541
|
slot="label"
|
|
446
|
-
effect="
|
|
542
|
+
effect="light"
|
|
447
543
|
content="按钮点击事件绑定的弹窗表单"
|
|
448
544
|
placement="top"
|
|
449
545
|
>
|
|
@@ -468,7 +564,7 @@
|
|
|
468
564
|
<el-form-item>
|
|
469
565
|
<el-tooltip
|
|
470
566
|
slot="label"
|
|
471
|
-
effect="
|
|
567
|
+
effect="light"
|
|
472
568
|
content="弹窗表单的确认事件绑定的接口，如果关联表单中有配置按钮的提交请求，请勿重复关联"
|
|
473
569
|
placement="top"
|
|
474
570
|
>
|
|
@@ -477,7 +573,6 @@
|
|
|
477
573
|
<el-select
|
|
478
574
|
v-model="dialog.data.api"
|
|
479
575
|
style="width:100%"
|
|
480
|
-
value-key="id"
|
|
481
576
|
clearable
|
|
482
577
|
placeholder="如关联表单中已配置接口，请勿重复关联"
|
|
483
578
|
no-data-text="暂无接口，请前往【接口模块】创建"
|
|
@@ -486,7 +581,7 @@
|
|
|
486
581
|
v-for="item in apiOptions"
|
|
487
582
|
:key="item.id"
|
|
488
583
|
:label="item.label"
|
|
489
|
-
:value="item"
|
|
584
|
+
:value="item.id"
|
|
490
585
|
>
|
|
491
586
|
</el-option>
|
|
492
587
|
</el-select>
|
|
@@ -499,8 +594,10 @@
|
|
|
499
594
|
</template>
|
|
500
595
|
|
|
501
596
|
<script>
|
|
597
|
+
import Draggable from "vuedraggable";
|
|
502
598
|
import { deepClone } from "../FormMaking/util";
|
|
503
599
|
export default {
|
|
600
|
+
components: { Draggable },
|
|
504
601
|
props: {
|
|
505
602
|
config: {
|
|
506
603
|
type: Object,
|
|
@@ -514,11 +611,11 @@ export default {
|
|
|
514
611
|
data() {
|
|
515
612
|
return {
|
|
516
613
|
tabsMenus: [
|
|
517
|
-
{ title: "
|
|
518
|
-
{ title: "
|
|
519
|
-
{ title: "
|
|
614
|
+
{ title: "字段配置", value: "field" },
|
|
615
|
+
{ title: "列表属性", value: "table" },
|
|
616
|
+
{ title: "样式设置", value: "css" }
|
|
520
617
|
],
|
|
521
|
-
activeTab: { title: "列表属性", value:
|
|
618
|
+
activeTab: { title: "列表属性", value: "table" },
|
|
522
619
|
fields: [],
|
|
523
620
|
searchField: {
|
|
524
621
|
isCheckAll: false,
|
|
@@ -536,6 +633,19 @@ export default {
|
|
|
536
633
|
"group-network",
|
|
537
634
|
"group-button"
|
|
538
635
|
],
|
|
636
|
+
pageInfoLayout: [
|
|
637
|
+
{ label: "总条数", value: "total" },
|
|
638
|
+
{ label: "分页条数", value: "sizes" },
|
|
639
|
+
{ label: "上一页", value: "prev" },
|
|
640
|
+
{ label: "页码", value: "pager" },
|
|
641
|
+
{ label: "下一页", value: "next" },
|
|
642
|
+
{ label: "跳转", value: "jumper" }
|
|
643
|
+
],
|
|
644
|
+
pageInfoAlign: [
|
|
645
|
+
{ label: "左对齐", value: "left" },
|
|
646
|
+
{ label: "居中对齐", value: "center" },
|
|
647
|
+
{ label: "右对齐", value: "right" }
|
|
648
|
+
],
|
|
539
649
|
formRules: {
|
|
540
650
|
"table.fieldsType": [
|
|
541
651
|
{ required: true, message: "请选择字段类型", trigger: "change" }
|
|
@@ -599,9 +709,6 @@ export default {
|
|
|
599
709
|
this.tableActiveFields.length !== this.fields.length
|
|
600
710
|
};
|
|
601
711
|
},
|
|
602
|
-
handleTabsSelect(val) {
|
|
603
|
-
this.activeTab = val;
|
|
604
|
-
},
|
|
605
712
|
handleCheckAllChange(bool, action) {
|
|
606
713
|
if (action === "searchField") {
|
|
607
714
|
this.fields.forEach(item => {
|
|
@@ -694,7 +801,7 @@ export default {
|
|
|
694
801
|
</script>
|
|
695
802
|
|
|
696
803
|
<style lang="scss" scoped>
|
|
697
|
-
.
|
|
804
|
+
.tableWidgetConfig {
|
|
698
805
|
background-color: white;
|
|
699
806
|
.tabs {
|
|
700
807
|
position: sticky;
|
|
@@ -718,25 +825,14 @@ export default {
|
|
|
718
825
|
}
|
|
719
826
|
}
|
|
720
827
|
|
|
721
|
-
.
|
|
722
|
-
height: calc(100% - 45px);
|
|
723
|
-
.fields-item {
|
|
724
|
-
padding: 0 10px;
|
|
725
|
-
height: 30px;
|
|
726
|
-
margin-right: 0;
|
|
727
|
-
line-height: 30px;
|
|
728
|
-
}
|
|
729
|
-
|
|
828
|
+
.fieldsView {
|
|
730
829
|
.el-checkbox {
|
|
731
|
-
padding: 0 10px;
|
|
732
|
-
margin-right: 0;
|
|
733
830
|
width: 100%;
|
|
734
831
|
height: 30px;
|
|
735
832
|
line-height: 30px;
|
|
736
833
|
}
|
|
737
834
|
}
|
|
738
|
-
|
|
739
|
-
.tableConfig {
|
|
835
|
+
.configItem {
|
|
740
836
|
height: calc(100% - 45px);
|
|
741
837
|
|
|
742
838
|
.collapse-title {
|
|
@@ -773,7 +869,7 @@ export default {
|
|
|
773
869
|
</style>
|
|
774
870
|
|
|
775
871
|
<style lang="scss">
|
|
776
|
-
.
|
|
872
|
+
.tableWidgetConfig {
|
|
777
873
|
.el-collapse-item__header {
|
|
778
874
|
padding: 0 10px;
|
|
779
875
|
height: 40px;
|
|
@@ -786,5 +882,12 @@ export default {
|
|
|
786
882
|
.el-radio-button__inner {
|
|
787
883
|
padding: 7px;
|
|
788
884
|
}
|
|
885
|
+
|
|
886
|
+
.pageInfo-currentPage {
|
|
887
|
+
width: 100%;
|
|
888
|
+
.el-input__inner {
|
|
889
|
+
text-align: left;
|
|
890
|
+
}
|
|
891
|
+
}
|
|
789
892
|
}
|
|
790
893
|
</style>
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="widgetTable">
|
|
3
3
|
<div class="table-title">查询字段</div>
|
|
4
|
-
<div
|
|
4
|
+
<div
|
|
5
|
+
class="tableList searchList"
|
|
6
|
+
v-loading="!config.search.show"
|
|
7
|
+
element-loading-text="已关闭查询区"
|
|
8
|
+
:element-loading-spinner="elementLoading.spinner"
|
|
9
|
+
:element-loading-background="elementLoading.background"
|
|
10
|
+
>
|
|
5
11
|
<div class="table-item table-header">
|
|
6
12
|
<div class="table-item-custom">拖动</div>
|
|
7
13
|
<div>列名</div>
|
|
@@ -73,7 +79,7 @@
|
|
|
73
79
|
<div v-else class="search-content"></div>
|
|
74
80
|
</div>
|
|
75
81
|
<div class="table-title">列表字段</div>
|
|
76
|
-
<div class="tableList" style="height: calc(100% -
|
|
82
|
+
<div class="tableList" style="height: calc(100% - 340px);">
|
|
77
83
|
<div class="table-item table-header">
|
|
78
84
|
<div class="table-item-custom">拖动</div>
|
|
79
85
|
<div>列名</div>
|
|
@@ -132,6 +138,29 @@
|
|
|
132
138
|
</draggable>
|
|
133
139
|
</div>
|
|
134
140
|
|
|
141
|
+
<div class="table-title">分页控件</div>
|
|
142
|
+
<div
|
|
143
|
+
class="tableList pageInfo"
|
|
144
|
+
v-loading="!config.table.pageInfo.show"
|
|
145
|
+
element-loading-text="已关闭分页"
|
|
146
|
+
:element-loading-spinner="elementLoading.spinner"
|
|
147
|
+
:element-loading-background="elementLoading.background"
|
|
148
|
+
>
|
|
149
|
+
<el-pagination
|
|
150
|
+
:style="{ 'text-align': config.table.pageInfo.style.align }"
|
|
151
|
+
:current-page="config.table.pageInfo.options.currentPage"
|
|
152
|
+
:small="config.table.pageInfo.style.small"
|
|
153
|
+
:background="config.table.pageInfo.style.background"
|
|
154
|
+
:disabled="config.table.pageInfo.style.disabled"
|
|
155
|
+
:hide-on-single-page="config.table.pageInfo.style.hideOnSinglePage"
|
|
156
|
+
:page-size="config.table.pageInfo.options.pageSize"
|
|
157
|
+
:page-sizes="config.table.pageInfo.options.sizes"
|
|
158
|
+
:layout="config.table.pageInfo.options.layout"
|
|
159
|
+
:total="1000"
|
|
160
|
+
>
|
|
161
|
+
</el-pagination>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
135
164
|
<th-dialog
|
|
136
165
|
v-model="dialog.visible"
|
|
137
166
|
:title="dialog.title"
|
|
@@ -163,7 +192,11 @@ export default {
|
|
|
163
192
|
{ label: "右对齐", value: "right" }
|
|
164
193
|
],
|
|
165
194
|
dialog: { visible: false, title: "", data: null },
|
|
166
|
-
codeEditorValue: ""
|
|
195
|
+
codeEditorValue: "",
|
|
196
|
+
elementLoading: {
|
|
197
|
+
spinner: "el-icon-warning",
|
|
198
|
+
background: "rgba(0, 0, 0, 0.6)"
|
|
199
|
+
}
|
|
167
200
|
};
|
|
168
201
|
},
|
|
169
202
|
mounted() {},
|
|
@@ -203,7 +236,7 @@ export default {
|
|
|
203
236
|
}
|
|
204
237
|
}
|
|
205
238
|
.tableList {
|
|
206
|
-
margin
|
|
239
|
+
margin: 10px 0;
|
|
207
240
|
border: 1px solid #dcdfe6;
|
|
208
241
|
|
|
209
242
|
.table-header {
|
|
@@ -252,6 +285,11 @@ export default {
|
|
|
252
285
|
}
|
|
253
286
|
}
|
|
254
287
|
|
|
288
|
+
.pageInfo {
|
|
289
|
+
padding: 10px 0;
|
|
290
|
+
height: 52px;
|
|
291
|
+
}
|
|
292
|
+
|
|
255
293
|
// .table-content:hover::-webkit-scrollbar-thumb {
|
|
256
294
|
// background-color: rgba(69, 90, 100, 0.2);
|
|
257
295
|
// }
|