tianheng-ui 0.1.63 → 0.1.65

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 (60) hide show
  1. package/lib/theme-chalk/index.scss +1 -1
  2. package/lib/theme-chalk/styles/feature.scss +1 -0
  3. package/lib/tianheng-ui.js +13 -13
  4. package/package.json +1 -1
  5. package/packages/CodeEditor/index.vue +41 -19
  6. package/packages/FormMaking/GenerateForm.vue +67 -71
  7. package/packages/FormMaking/WidgetConfig.vue +1 -1
  8. package/packages/FormMaking/WidgetForm.vue +11 -5
  9. package/packages/FormMaking/WidgetFormItem.vue +11 -4
  10. package/packages/FormMaking/WidgetGuide.vue +0 -0
  11. package/packages/FormMaking/WidgetTools.vue +2 -2
  12. package/packages/FormMaking/custom/config.js +320 -76
  13. package/packages/FormMaking/custom/configs/blank.vue +1 -1
  14. package/packages/FormMaking/custom/configs/button.vue +2 -2
  15. package/packages/FormMaking/custom/configs/cascader.vue +71 -34
  16. package/packages/FormMaking/custom/configs/cell.vue +1 -1
  17. package/packages/FormMaking/custom/configs/checkbox.vue +95 -64
  18. package/packages/FormMaking/custom/configs/color.vue +1 -1
  19. package/packages/FormMaking/custom/configs/date.vue +1 -1
  20. package/packages/FormMaking/custom/configs/descriptions.vue +314 -0
  21. package/packages/FormMaking/custom/configs/divider.vue +1 -1
  22. package/packages/FormMaking/custom/configs/editor.vue +1 -1
  23. package/packages/FormMaking/custom/configs/filler.vue +1 -1
  24. package/packages/FormMaking/custom/configs/grid.vue +33 -22
  25. package/packages/FormMaking/custom/configs/image.vue +1 -1
  26. package/packages/FormMaking/custom/configs/input.vue +1 -1
  27. package/packages/FormMaking/custom/configs/number.vue +1 -1
  28. package/packages/FormMaking/custom/configs/radio.vue +84 -53
  29. package/packages/FormMaking/custom/configs/rate.vue +1 -1
  30. package/packages/FormMaking/custom/configs/select.vue +157 -158
  31. package/packages/FormMaking/custom/configs/slider.vue +1 -1
  32. package/packages/FormMaking/custom/configs/switch.vue +1 -1
  33. package/packages/FormMaking/custom/configs/table.vue +1 -1
  34. package/packages/FormMaking/custom/configs/tableH5.vue +1 -1
  35. package/packages/FormMaking/custom/configs/tabs.vue +1 -1
  36. package/packages/FormMaking/custom/configs/text.vue +1 -1
  37. package/packages/FormMaking/custom/configs/textarea.vue +1 -1
  38. package/packages/FormMaking/custom/configs/time.vue +1 -1
  39. package/packages/FormMaking/custom/configs/upload.vue +1 -1
  40. package/packages/FormMaking/custom/configs/workflow.vue +494 -0
  41. package/packages/FormMaking/custom/index.js +4 -2
  42. package/packages/FormMaking/custom/items/cascader.vue +2 -2
  43. package/packages/FormMaking/custom/items/checkbox.vue +6 -10
  44. package/packages/FormMaking/custom/items/descriptions.vue +75 -0
  45. package/packages/FormMaking/custom/items/grid_dev.vue +2 -2
  46. package/packages/FormMaking/custom/items/list_dev.vue +10 -22
  47. package/packages/FormMaking/custom/items/radio.vue +5 -9
  48. package/packages/FormMaking/custom/items/select.vue +2 -4
  49. package/packages/FormMaking/custom/items/tableH5_dev.vue +9 -18
  50. package/packages/FormMaking/custom/items/table_dev.vue +13 -3
  51. package/packages/FormMaking/custom/items/tabs_dev.vue +3 -2
  52. package/packages/FormMaking/custom/items/workflow.vue +131 -0
  53. package/packages/FormMaking/custom/register.js +15 -1
  54. package/packages/FormMaking/index.vue +61 -27
  55. package/packages/FormMaking/styles/index.scss +156 -478
  56. package/packages/TableMaking/index.vue +4 -1
  57. package/packages/TableMaking/widgetGuide.vue +96 -0
  58. package/packages/TableMaking/widgetTable.vue +0 -7
  59. package/packages/Workflow/index.vue +0 -31
  60. package/packages/FormMaking/GenerateFormItemH5.vue +0 -825
@@ -1,20 +1,23 @@
1
1
  <template>
2
- <div class="list">
2
+ <div class="component-list">
3
3
  <draggable
4
4
  v-model="widget.options.columns"
5
5
  :no-transition-on-drag="true"
6
6
  v-bind="{
7
7
  group: 'people',
8
- ghostClass: 'ghost',
8
+ ghostClass: 'draggable-ghost',
9
9
  animation: 200,
10
10
  handle: '.drag-widget'
11
11
  }"
12
12
  @add="handleWidgetAdd($event)"
13
13
  >
14
- <transition-group name="fade" tag="div" class="list">
14
+ <transition-group name="fade" tag="div" class="draggable-list">
15
15
  <div
16
- v-for="(element, elementIndex) in widget.options.columns"
17
- class="list-item"
16
+ v-for="(element, elementIndex) in widget.options.columns.filter(
17
+ item => {
18
+ return item.key;
19
+ }
20
+ )"
18
21
  :key="element.key"
19
22
  @click.stop="selectWidget = element"
20
23
  >
@@ -65,6 +68,7 @@ export default {
65
68
  },
66
69
  methods: {
67
70
  handleWidgetAdd($event) {
71
+ console.log("handleWidgetAdd =>", $event);
68
72
  const newIndex = $event.newIndex;
69
73
  const oldIndex = $event.oldIndex;
70
74
  const newComponent = JSON.parse(
@@ -95,23 +99,7 @@ export default {
95
99
  </script>
96
100
 
97
101
  <style lang="scss" scoped>
98
- .list {
99
- background: #fff;
100
-
101
- .list {
102
- min-height: 50px;
103
- border: 1px dashed #ccc;
104
- .list-item {
105
- width: 100%;
106
- }
107
- .list-item:nth-child(1) {
108
- display: flex;
109
- > div:first-child {
110
- flex: 1;
111
- }
112
- }
113
- }
114
-
102
+ .component-list {
115
103
  .tools {
116
104
  text-align: right;
117
105
  }
@@ -10,14 +10,12 @@
10
10
  :style="{
11
11
  display: widget.options.inline ? 'inline-block' : 'block'
12
12
  }"
13
- v-for="(item, index) in widget.options.remote
14
- ? widget.options.remoteOptions
15
- : widget.options.options"
13
+ v-for="(item, index) in widget.options.options"
16
14
  :key="index"
17
15
  :label="item.value"
18
16
  :border="widget.options.border"
19
17
  >
20
- <template v-if="widget.options.remote">{{ item.label }}</template>
18
+ <template v-if="widget.options.remote.open">{{ item.label }}</template>
21
19
  <template v-else>{{
22
20
  widget.options.showLabel ? item.label : item.value
23
21
  }}</template>
@@ -28,14 +26,12 @@
28
26
  :style="{
29
27
  display: widget.options.inline ? 'inline-block' : 'block'
30
28
  }"
29
+ v-for="(item, index) in widget.options.options"
30
+ :key="index"
31
31
  :label="item.value"
32
32
  :border="widget.options.border"
33
- v-for="(item, index) in widget.options.remote
34
- ? widget.options.remoteOptions
35
- : widget.options.options"
36
- :key="index"
37
33
  >
38
- <template v-if="widget.options.remote">{{ item.label }}</template>
34
+ <template v-if="widget.options.remote.open">{{ item.label }}</template>
39
35
  <template v-else>{{
40
36
  widget.options.showLabel ? item.label : item.value
41
37
  }}</template>
@@ -14,13 +14,11 @@
14
14
  @blur="handleEventAction(widget.events.onBlur)"
15
15
  >
16
16
  <el-option
17
- v-for="item in widget.options.remote
18
- ? widget.options.remoteOptions
19
- : widget.options.options"
17
+ v-for="item in widget.options.options"
20
18
  :key="item.value"
21
19
  :value="item.value"
22
20
  :label="
23
- widget.options.showLabel || widget.options.remote
21
+ widget.options.showLabel || widget.options.remote.open
24
22
  ? item.label
25
23
  : item.value
26
24
  "
@@ -1,20 +1,20 @@
1
1
  <template>
2
- <div class="tableH5">
2
+ <div class="component-tableH5">
3
3
  <draggable
4
4
  v-model="widget.options.columns"
5
5
  :no-transition-on-drag="true"
6
6
  v-bind="{
7
7
  group: 'people',
8
- ghostClass: 'ghost',
8
+ ghostClass: 'draggable-ghost',
9
9
  animation: 200,
10
10
  handle: '.drag-widget'
11
11
  }"
12
12
  @add="handleWidgetAdd($event)"
13
13
  >
14
- <transition-group name="fade" tag="div" class="tableH5-list">
14
+ <transition-group name="fade" tag="div" class="draggable-list">
15
15
  <div
16
16
  v-for="(element, elementIndex) in widget.options.columns"
17
- class="tableH5-list-item"
17
+ class="draggable-list-item"
18
18
  :key="element.key"
19
19
  @click.stop="selectWidget = element"
20
20
  >
@@ -97,20 +97,11 @@ export default {
97
97
  </script>
98
98
 
99
99
  <style lang="scss" scoped>
100
- .tableH5 {
101
- background: #fff;
102
-
103
- .tableH5-list {
104
- min-height: 50px;
105
- border: 1px dashed #ccc;
106
- .tableH5-list-item {
107
- width: 100%;
108
- }
109
- .tableH5-list-item:nth-child(1) {
110
- display: flex;
111
- > div:first-child {
112
- flex: 1;
113
- }
100
+ .component-tableH5 {
101
+ .draggable-list-item:nth-child(1) {
102
+ display: flex;
103
+ > div:first-child {
104
+ flex: 1;
114
105
  }
115
106
  }
116
107
 
@@ -1,16 +1,17 @@
1
1
  <template>
2
2
  <draggable
3
+ class="component-table"
3
4
  v-model="widget.options.columns"
4
5
  :no-transition-on-drag="true"
5
6
  v-bind="{
6
7
  group: 'people',
7
- ghostClass: 'ghost',
8
+ ghostClass: 'draggable-ghost',
8
9
  animation: 200,
9
10
  handle: '.drag-widget'
10
11
  }"
11
12
  @add="handleWidgetAdd($event, widget)"
12
13
  >
13
- <transition-group name="fade" tag="div" class="widget-table-list">
14
+ <transition-group name="fade" tag="div" class="draggable-list">
14
15
  <widget-form-item
15
16
  v-for="(element, elementIndex) in widget.options.columns.filter(
16
17
  item => {
@@ -83,4 +84,13 @@ export default {
83
84
  };
84
85
  </script>
85
86
 
86
- <style></style>
87
+ <style lang="scss" scoped>
88
+ .component-table {
89
+ .draggable-list {
90
+ display: -webkit-box;
91
+ overflow: hidden;
92
+ overflow-x: scroll;
93
+ white-space: nowrap;
94
+ }
95
+ }
96
+ </style>
@@ -1,5 +1,6 @@
1
1
  <template>
2
2
  <el-tabs
3
+ class="component-tabs"
3
4
  v-model="widget.options.defaultValue"
4
5
  :type="widget.options.type"
5
6
  :tab-position="widget.options.tabPosition"
@@ -15,13 +16,13 @@
15
16
  :no-transition-on-drag="true"
16
17
  v-bind="{
17
18
  group: 'people',
18
- ghostClass: 'ghost',
19
+ ghostClass: 'draggable-ghost',
19
20
  animation: 200,
20
21
  handle: '.drag-widget'
21
22
  }"
22
23
  @add="handleWidgetAdd($event, widget, columnIndex)"
23
24
  >
24
- <transition-group name="fade" tag="div" class="widget-col-list">
25
+ <transition-group name="fade" tag="div" class="draggable-list">
25
26
  <widget-form-item
26
27
  v-for="(element, elementIndex) in column.list.filter(item => {
27
28
  return item.key;
@@ -0,0 +1,131 @@
1
+ <template>
2
+ <div class="component-workflow">
3
+ <div
4
+ v-if="widget.name"
5
+ class="component-header_title"
6
+ v-html="widget.name"
7
+ ></div>
8
+
9
+ <el-timeline
10
+ v-if="dataModel.processInstTaskRsps.length"
11
+ :reverse="widget.options.reverse"
12
+ >
13
+ <el-timeline-item
14
+ class="workflow-item"
15
+ v-for="(item, index) in dataModel.processInstTaskRsps"
16
+ :key="index"
17
+ :type="item.type"
18
+ :icon="item.icon"
19
+ :color="item.color"
20
+ :placement="widget.options.placement"
21
+ :timestamp="item.timestamp"
22
+ :hide-timestamp="
23
+ widget.options.hideTimestamp || widget.options.placement === 'right'
24
+ "
25
+ >
26
+ <div>
27
+ <div class="workflow-item-header">
28
+ <div class="title">{{ item.name }}</div>
29
+ <div
30
+ v-if="
31
+ !widget.options.hideTimestamp &&
32
+ widget.options.placement === 'right'
33
+ "
34
+ class="timestamp"
35
+ >
36
+ {{ item.timestamp }}
37
+ </div>
38
+ </div>
39
+ <div class="workflow-item-content th-is_border">
40
+ <th-cell
41
+ v-for="(persons, pIndex) in item.checkPersons"
42
+ :key="pIndex"
43
+ :title="persons.name"
44
+ :value="persons.status"
45
+ :label="persons.description"
46
+ hover
47
+ >
48
+ <img
49
+ v-if="persons.avatar"
50
+ class="persons-avatar"
51
+ slot="icon"
52
+ :src="persons.avatar"
53
+ alt=""
54
+ />
55
+ </th-cell>
56
+ </div>
57
+ <div class="workflow-item-footer"></div>
58
+ </div>
59
+ </el-timeline-item>
60
+ </el-timeline>
61
+ <div v-if="dataModel.processInstButtons.length" class="footer">
62
+ <el-button
63
+ v-for="(item, index) in dataModel.processInstButtons"
64
+ :key="index"
65
+ :style="item.options.customStyle"
66
+ :type="item.options.type"
67
+ :icon="item.options.icon"
68
+ :plain="item.options.plain"
69
+ :round="item.options.round"
70
+ :circle="item.options.circle"
71
+ :size="item.options.size"
72
+ :disabled="item.options.disabled"
73
+ :loading="item.options.loading"
74
+ @click="handleActionClick(item)"
75
+ >{{ item.name }}</el-button
76
+ >
77
+ </div>
78
+ </div>
79
+ </template>
80
+
81
+ <script>
82
+ import { itemsComponent, eventMixin } from "../mixins/index";
83
+ export default {
84
+ mixins: [itemsComponent, eventMixin],
85
+ methods: {
86
+ handleActionClick(item) {
87
+ this.$emit("button-submit", item);
88
+ }
89
+ }
90
+ };
91
+ </script>
92
+
93
+ <style lang="scss" scoped>
94
+ .component-workflow {
95
+ .el-timeline {
96
+ padding: 0px;
97
+ }
98
+ .workflow-item-header {
99
+ margin-bottom: 5px;
100
+ height: 20px;
101
+ line-height: 20px;
102
+ display: flex;
103
+ justify-content: space-between;
104
+ .title {
105
+ // font-weight: bold;
106
+ }
107
+ .timestamp {
108
+ color: #909399;
109
+ }
110
+ }
111
+ .workflow-item-content {
112
+ border-radius: 4px;
113
+ overflow: hidden;
114
+ .persons-avatar {
115
+ margin-right: 10px;
116
+ width: 24px;
117
+ height: 24px;
118
+ }
119
+ }
120
+ .workflow-item-footer {
121
+ }
122
+
123
+ .footer {
124
+ display: flex;
125
+
126
+ .el-button {
127
+ flex: 1;
128
+ }
129
+ }
130
+ }
131
+ </style>
@@ -1,5 +1,10 @@
1
1
  //在此注册组件
2
- import { basicComponents, advanceComponents, layoutComponents } from "./config";
2
+ import {
3
+ basicComponents,
4
+ advanceComponents,
5
+ layoutComponents,
6
+ businessComponents
7
+ } from "./config";
3
8
 
4
9
  let compsData = {};
5
10
  for (const config of basicComponents) {
@@ -26,4 +31,13 @@ for (const config of layoutComponents) {
26
31
  content: null
27
32
  };
28
33
  }
34
+ for (const config of businessComponents) {
35
+ compsData[config.type] = {
36
+ name: config.name,
37
+ type: config.type,
38
+ config: config,
39
+ content: null
40
+ };
41
+ }
42
+
29
43
  export default compsData;
@@ -17,17 +17,13 @@
17
17
  :list="getBasicComponents"
18
18
  v-bind="{
19
19
  group: { name: 'people', pull: 'clone', put: false },
20
- sort: false,
21
- ghostClass: 'ghost'
20
+ sort: false
22
21
  }"
23
22
  >
24
23
  <li
25
24
  v-for="(item, index) in getBasicComponents"
26
25
  class="fields-label"
27
- :class="{
28
- 'no-put': item.type == 'divider',
29
- [item.type]: true
30
- }"
26
+ :class="[[item.type]]"
31
27
  :key="index"
32
28
  >
33
29
  <a>
@@ -47,19 +43,13 @@
47
43
  :list="getAdvanceComponents"
48
44
  v-bind="{
49
45
  group: { name: 'people', pull: 'clone', put: false },
50
- sort: false,
51
- ghostClass: 'ghost'
46
+ sort: false
52
47
  }"
53
48
  >
54
49
  <li
55
50
  v-for="(item, index) in getAdvanceComponents"
56
- class="fields-label"
57
- :class="{
58
- 'no-put': ['table', 'tableH5', 'list', 'tabs'].includes(
59
- item.type
60
- ),
61
- [item.type]: true
62
- }"
51
+ class="fields-label no-put"
52
+ :class="[[item.type]]"
63
53
  :key="index"
64
54
  >
65
55
  <a>
@@ -79,8 +69,7 @@
79
69
  :list="getLayoutComponents"
80
70
  v-bind="{
81
71
  group: { name: 'people', pull: 'clone', put: false },
82
- sort: false,
83
- ghostClass: 'ghost'
72
+ sort: false
84
73
  }"
85
74
  >
86
75
  <li
@@ -99,6 +88,32 @@
99
88
  </li>
100
89
  </draggable>
101
90
  </el-collapse-item>
91
+ <el-collapse-item
92
+ v-if="businessFields.length"
93
+ title="业务组件"
94
+ name="group-business"
95
+ >
96
+ <draggable
97
+ tag="ul"
98
+ :list="getBusinessComponents"
99
+ v-bind="{
100
+ group: { name: 'people', pull: 'clone', put: false },
101
+ sort: false
102
+ }"
103
+ >
104
+ <li
105
+ v-for="(item, index) in getBusinessComponents"
106
+ class="fields-label"
107
+ :class="[[item.type]]"
108
+ :key="index"
109
+ >
110
+ <a>
111
+ <i class="icon iconfont" :class="item.icon"></i>
112
+ <span>{{ item.name }}</span>
113
+ </a>
114
+ </li>
115
+ </draggable>
116
+ </el-collapse-item>
102
117
  </el-collapse>
103
118
  </div>
104
119
 
@@ -152,6 +167,7 @@ import {
152
167
  basicComponents,
153
168
  advanceComponents,
154
169
  layoutComponents,
170
+ businessComponents,
155
171
  baseConfig
156
172
  } from "./custom/config";
157
173
  import generateCode from "./util/generateCode.js";
@@ -212,24 +228,34 @@ export default {
212
228
  },
213
229
  advanceFields: {
214
230
  type: Array,
215
- default: () => ["table", "tableH5", "list", "tabs", "blank"]
231
+ default: () => ["table", "tableH5", "list", "tabs"]
216
232
  },
217
233
  layoutFields: {
218
234
  type: Array,
219
235
  default: () => ["grid", "filler", "divider"]
236
+ },
237
+ businessFields: {
238
+ type: Array,
239
+ default: () => ["blank", "descriptions", "workflow"]
220
240
  }
221
241
  },
222
242
  data() {
223
243
  this.basicComponents = basicComponents;
224
244
  this.advanceComponents = advanceComponents;
225
245
  this.layoutComponents = layoutComponents;
246
+ this.businessComponents = businessComponents;
226
247
  this.baseConfig = deepClone(baseConfig);
227
248
  return {
228
249
  formConfig: this.baseConfig,
229
250
  widgetFormSelect: {},
230
251
  configTab: "form",
231
252
  apiConfig: {},
232
- collapseValue: ["group-basic", "group-advance", "group-layout"]
253
+ collapseValue: [
254
+ "group-basic",
255
+ "group-advance",
256
+ "group-layout",
257
+ "group-business"
258
+ ]
233
259
  };
234
260
  },
235
261
  computed: {
@@ -250,6 +276,12 @@ export default {
250
276
  return this.layoutFields.includes(e.type);
251
277
  });
252
278
  return list;
279
+ },
280
+ getBusinessComponents() {
281
+ const list = this.businessComponents.filter(e => {
282
+ return this.businessFields.includes(e.type);
283
+ });
284
+ return list;
253
285
  }
254
286
  },
255
287
  watch: {
@@ -316,13 +348,15 @@ export default {
316
348
  });
317
349
  } else if (item.type === "table" || item.type === "tableH5") {
318
350
  initList(item.options.columns);
319
- } else if (item.options.remote || item.options.remoteFunc) {
320
- fieldsApi[item.model] = item.options.remoteFunc;
351
+ } else if (item.type === "workflow") {
352
+ initList(item.options.defaultValue.processInstButtons);
353
+ } else if (item.options.remote?.open || item.options.remote?.api) {
354
+ fieldsApi[item.model] = item.options.remote.api;
321
355
  }
322
356
  }
323
357
  };
324
358
  initList(this.formConfig.list);
325
-
359
+
326
360
  const initParams = (paramsList, pAlias, bool) => {
327
361
  paramsList.forEach(item => {
328
362
  if (bool) {
@@ -441,8 +475,8 @@ export default {
441
475
  </script>
442
476
 
443
477
  <style lang="scss" scoped>
444
- $primary-color: #409eff;
445
- $primary-background-color: #ecf5ff;
478
+ @import "../../lib/theme-chalk/styles/variable.scss";
479
+
446
480
  .th-formMaking {
447
481
  height: 100%;
448
482
  background-color: white;
@@ -476,11 +510,11 @@ $primary-background-color: #ecf5ff;
476
510
  transition: 0.25s;
477
511
 
478
512
  &:hover {
479
- color: $primary-color !important;
480
- border: 1px dashed $primary-color;
513
+ color: $color-parimary-active !important;
514
+ border: 1px dashed $color-parimary-active;
481
515
 
482
516
  a {
483
- color: $primary-color !important;
517
+ color: $color-parimary-active !important;
484
518
  }
485
519
  }
486
520